'use client';
import { useState } from 'react';
import { NodeViewProps } from '@tiptap/react';
import { cn } from '@/lib/utils';
import WidgetControl from '../../components/widget-control';
import Image from 'next/image';
import { ImageQuality } from '@/config/enums/image-quality';
import { Button } from '@/components/ui/button';
import PollSettingsDialog from './settings-modal';
import { WidgetType } from '@/config/enums/tip-tap';

export default function PollNode(props: NodeViewProps) {
  const { pollId } = props.node.attrs.props ?? {};

  const [open, setOpen] = useState(false);
  const [collapsed, setCollapsed] = useState(false);

  const handleSetPoll = (pollId: string | null) => {
    props.updateAttributes({
      props: { pollId }
    });
  };

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

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

        {pollId ? (
          <div className='article m-auto max-w-100'>
            <span>Poll example:</span>
            <Image
              src='/images/dashboard/poll-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 poll</span>
          </Button>
        )}
      </div>
      <PollSettingsDialog
        open={open}
        onOpenChange={setOpen}
        onSubmit={handleSetPoll}
        initialValue={pollId}
      />
    </div>
  );
}