'use client';
import { ChangeEvent, useState } from 'react';
import { NodeViewProps } from '@tiptap/react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@/components/ui/select';
import { WidgetPosition, WidgetType } from '@/config/enums/tip-tap';
import { toast } from 'sonner';
import { Textarea } from '@/components/ui/textarea';
import QuoteWidget from '../../tiptap-widgets/quote/quote-widget';
import WidgetControl from '../../components/widget-control';

const options = [
  {
    label: 'Default',
    value: WidgetPosition.CENTER
  },
  {
    label: 'Left column',
    value: WidgetPosition.LEFT_COL
  }
];

export default function QuoteNode(props: NodeViewProps) {
  const { node } = props;
  const { props: quoteProps } = node.attrs;
  const [open, setOpen] = useState(false);
  const [text, setText] = useState(quoteProps?.text || '');
  const [selectedVariant, setSelectedVariant] = useState(
    quoteProps?.variant || WidgetPosition.CENTER
  );
  const [collapsed, setCollapsed] = useState(false);

  const handleSelectVariant = (variant: string) => {
    setSelectedVariant(variant);
  };

  const handleConfirm = () => {
    if (!text?.trim()) {
      toast.error('Please write a quote');
      return;
    }
    props.updateAttributes({
      props: {
        text,
        variant: selectedVariant || WidgetPosition.CENTER
      }
    });
    setOpen(false);
  };

  const handleReset = () => {
    props.updateAttributes({
      props: {
        text: '',
        variant: selectedVariant || WidgetPosition.CENTER
      }
    });
    setSelectedVariant(WidgetPosition.CENTER);
    setText('');
  };

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

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

  if (collapsed) {
    return (
      <div className='m-4 rounded border p-4'>
        <WidgetControl
          handleDialogOpen={() => {
            setCollapsed(false);
            setOpen(true);
          }}
          handleWidgetRemove={handleRemove}
          handleWidgetCollapse={() => setCollapsed(false)}
        />
        <span className='font-sans text-xl font-bold capitalize'>
          {WidgetType.QUOTE}
        </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)}
        />

        {!!quoteProps?.text ? (
          <QuoteWidget props={quoteProps} isNodeView />
        ) : (
          <Button
            variant='outline'
            onClick={() => setOpen(true)}
            type='button'
            className='justify-start'
          >
            <span>Set quote</span>
          </Button>
        )}
      </div>

      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Write quote</DialogTitle>
            <DialogDescription>Set quote with options:</DialogDescription>
          </DialogHeader>
          <div className='flex flex-wrap items-center justify-between'>
            <Select value={selectedVariant} onValueChange={handleSelectVariant}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  {options.map((option, index) => (
                    <SelectItem key={index} value={option.value}>
                      {option.label}
                    </SelectItem>
                  ))}
                </SelectGroup>
              </SelectContent>
            </Select>
          </div>

          <div className='max-h-[40vh] overflow-y-auto'>
            <Textarea
              placeholder='Type your quote here...'
              value={text}
              onChange={handleTextChange}
              rows={5}
            />
          </div>
          <DialogFooter>
            <Button variant='outline' onClick={handleReset}>
              Reset
            </Button>
            <Button onClick={handleConfirm}>Save</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}