'use client';
import { ChangeEvent, useState } from 'react';
import { NodeViewProps } from '@tiptap/react';
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { toast } from 'sonner';
import WidgetControl from '../../components/widget-control';
import { Input } from '@/components/ui/input';
import Image from 'next/image';
import { ImageQuality } from '@/config/enums/image-quality';
import { WidgetType } from '@/config/enums/tip-tap';

export default function VoteNode(props: NodeViewProps) {
  const { title: nodeTitle } = props.node.attrs.props ?? {};
  const [open, setOpen] = useState(false);
  const [title, setTitle] = useState(nodeTitle || '');
  const [collapsed, setCollapsed] = useState(false);

  const handleConfirm = () => {
    if (!title.trim()) {
      toast.error('Please write a title');
      return;
    }
    props.updateAttributes({
      props: {
        title
      }
    });
    setOpen(false);
  };

  const handleReset = () => {
    props.updateAttributes({
      props: {
        title: ''
      }
    });
    setTitle('');
  };

  const handleRemove = () => {
    props.deleteNode();
  };

  const handleTextChange = (e: ChangeEvent<HTMLInputElement>) => {
    const text = e.target.value;
    setTitle(text || '');
  };

  if (collapsed) {
    return (
      <div className='m-4 rounded border p-4'>
        <WidgetControl
          handleDialogOpen={() => {
            setCollapsed(false);
            setOpen(true);
          }}
          handleWidgetRemove={() => props.deleteNode()}
          handleWidgetCollapse={() => setCollapsed(false)}
        />
        <span className='font-sans text-xl font-bold capitalize'>
          {WidgetType.VOTE}
        </span>
      </div>
    );
  }

  return (
    <div>
      <div className='relative m-4 flex flex-col rounded border p-4'>
        <WidgetControl
          handleDialogOpen={() => setOpen(true)}
          handleWidgetRemove={handleRemove}
          handleWidgetCollapse={() => setCollapsed(true)}
        />

        {!!nodeTitle ? (
          <div className='vote m-auto max-w-100'>
            <span>Vote example:</span>
            <Image
              src='/images/dashboard/vote-preview.png'
              alt='vote preview'
              width={1000}
              height={600}
              className='w-full'
              quality={ImageQuality.LOW}
            />
          </div>
        ) : (
          <Button
            variant='outline'
            onClick={() => setOpen(true)}
            type='button'
            className='justify-start'
          >
            <span>Set vote</span>
          </Button>
        )}
      </div>

      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent aria-describedby={undefined}>
          <DialogHeader>
            <DialogTitle>Write vote title</DialogTitle>
          </DialogHeader>
          <Input
            placeholder='Type your vote title...'
            value={title}
            onChange={handleTextChange}
          />
          <DialogFooter>
            <Button variant='outline' onClick={handleReset}>
              Reset
            </Button>
            <Button onClick={handleConfirm}>Save</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}