'use client';
import { 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 { ModalVariant, WidgetType } from '@/config/enums/tip-tap';
import WidgetControl from '../../components/widget-control';
import { toast } from 'sonner';
import Image from 'next/image';
import { ImageQuality } from '@/config/enums/image-quality';

const options = [
  {
    label: 'Mobile pay',
    value: ModalVariant.MOBILE_PAY
  },
  {
    label: 'Vision',
    value: ModalVariant.VISION
  }
];

export default function ModalNode(props: NodeViewProps) {
  const { variant } = props.node.attrs.props ?? {};
  const [open, setOpen] = useState(false);
  const [selectedVariant, setSelectedVariant] = useState(variant);
  const [collapsed, setCollapsed] = useState(false);

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

  const handleConfirm = () => {
    if (!selectedVariant) {
      toast.error('Please chose a block variant before saving.');
      return;
    }
    props.updateAttributes({
      props: {
        variant: selectedVariant
      }
    });
    setOpen(false);
  };

  const handleReset = () => {
    props.updateAttributes({
      props: {
        variant: ''
      }
    });
    setSelectedVariant('');
  };

  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.MODAL}
        </span>
      </div>
    );
  }

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

        {!!variant ? (
          <div>
            <span>Modal example:</span>
            <Image
              src={`/images/dashboard/${variant}-preview.png`}
              alt='article 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 block</span>
          </Button>
        )}
      </div>

      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Select modal block</DialogTitle>
            <DialogDescription>
              Select a block type from the options below to update your widget
              configuration.
            </DialogDescription>
          </DialogHeader>
          <div className='flex flex-wrap items-center justify-between'>
            <Select value={selectedVariant} onValueChange={handleSelectVariant}>
              <SelectTrigger>
                <SelectValue placeholder='Chose a block' />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  {options.map((option, index) => (
                    <SelectItem key={index} value={option.value}>
                      {option.label}
                    </SelectItem>
                  ))}
                </SelectGroup>
              </SelectContent>
            </Select>
          </div>
          <DialogFooter>
            <Button variant='outline' onClick={handleReset}>
              Cancel
            </Button>
            <Button onClick={handleConfirm}>Save</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}