'use client';
import { useState } from 'react';
import { NodeViewProps } from '@tiptap/react';
import WidgetControl from '../../components/widget-control';
import { Button } from '@/components/ui/button';
import ArticleSettingsDialog from './settings-modal';
import { WidgetType } from '@/config/enums/tip-tap';
import ArticleWidget from '../../tiptap-widgets/article/article-widget';

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

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

  const handleSetArticle = (data: Record<string, string>) => {
    props.updateAttributes({
      props: { ...props.node.attrs.props, ...data }
    });
    setOpen(false);
  };

  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.ARTICLE}
        </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)}
        />

        {postId ? (
          <div className='m-auto max-w-100'>
            <ArticleWidget props={props.node.attrs.props} isNodeView />
          </div>
        ) : (
          <Button
            variant='outline'
            onClick={() => setOpen(true)}
            type='button'
            className='justify-start'
          >
            <span>Set article</span>
          </Button>
        )}
      </div>
      <ArticleSettingsDialog
        open={open}
        onOpenChange={setOpen}
        onSubmit={handleSetArticle}
        initialValues={{
          postId: postId || ''
        }}
      />
    </div>
  );
}