'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 {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@/components/ui/select';
import { WidgetPosition, WidgetType } from '@/config/enums/tip-tap';
import WidgetControl from '../../components/widget-control';
import Image from 'next/image';
import { ImageQuality } from '@/config/enums/image-quality';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

const options = [
  {
    label: 'Default',
    value: WidgetPosition.CENTER
  },
  {
    label: 'Left column',
    value: WidgetPosition.LEFT_COL
  }
];
export default function SuggestionNode(props: NodeViewProps) {
  const { variant, id } = props.node.attrs.props ?? {};
  const [open, setOpen] = useState(false);
  const [suggestionId, setSuggestionId] = useState(id || '');
  const [selectedVariant, setSelectedVariant] = useState(
    variant || WidgetPosition.CENTER
  );
  const [collapsed, setCollapsed] = useState(false);

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

  const handleSuggestion = (e: ChangeEvent<HTMLInputElement>) => {
    const text = e.target.value;
    setSuggestionId(text.trim() || '');
  };

  const handleConfirm = () => {
    props.updateAttributes({
      props: {
        variant: selectedVariant,
        id: suggestionId
      }
    });
    setOpen(false);
  };

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

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

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

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

        {!!variant ? (
          <div>
            <span>Block example:</span>
            <Image
              src={`/images/dashboard/suggestion-${variant}-preview.png`}
              alt='widget 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>Set suggestion block</DialogTitle>
          </DialogHeader>
          <div className='flex flex-col gap-2'>
            <Label className='text-neutral-400'>
              Select a block type from the options below to update your widget
              configuration.
            </Label>
            <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>
          <div className='flex flex-col gap-2'>
            <Label className='text-neutral-400'>
              Paste suggestion id for left column widget.
            </Label>
            <Input
              placeholder='Suggestion id...'
              value={suggestionId}
              onChange={handleSuggestion}
            />
          </div>
          <DialogFooter>
            <Button variant='outline' onClick={handleReset}>
              Reset
            </Button>
            <Button onClick={handleConfirm}>Save</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}