'use client';
import { useState } from 'react';
import { useTranslations } from "next-intl";
import { NodeViewProps } from '@tiptap/react';
import { Button } from '@/components/ui/button';
import WidgetControl from '../../components/widget-control';
import { BeforeAfterImageDialog } from './before-after-image-modal';
import { BeforeAfterImageProps } from '../../types/types';
import BeforeAfterImageWidget from '../../tiptap-widgets/before-after-image/before-after-image';
import { WidgetType } from '@/config/enums/tip-tap';

export default function BeforeAfterImageNode(props: NodeViewProps) {
  const item = !!Object.keys(props.node.attrs.props ?? {}).length
    ? props.node.attrs.props
    : undefined;

  const t = useTranslations("dashboard.tiptap.beforeAfterImage");
  const [itemDialogOpen, setItemDialogOpen] = useState(false);
  const [collapsed, setCollapsed] = useState(false);

  const handleSetItem = (data: BeforeAfterImageProps) => {
    props.updateAttributes({
      props: data
    });
    setItemDialogOpen(false);
  };

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

  if (collapsed) {
    return (
      <div className='m-4 rounded border p-4'>
        <WidgetControl
          handleDialogOpen={() => {
            setCollapsed(false);
            setItemDialogOpen(true);
          }}
          handleWidgetRemove={handleRemoveWidget}
          handleWidgetCollapse={() => setCollapsed(false)}
        />
        <span className='font-sans text-lg font-bold capitalize'>
          Image {WidgetType.SLIDER}
        </span>
      </div>
    );
  }

  return (
    <div>
      <div className='relative m-4 flex flex-col rounded border p-4'>
        <WidgetControl
          handleDialogOpen={() => setItemDialogOpen(true)}
          handleWidgetRemove={handleRemoveWidget}
          handleWidgetCollapse={() => setCollapsed(true)}
        />
        {item ? (
          <BeforeAfterImageWidget props={item} isNodeView />
        ) : (
          <Button
            variant='outline'
            onClick={() => {
              setItemDialogOpen(true);
            }}
            type='button'
            className='line-clamp-1 justify-start overflow-hidden text-ellipsis whitespace-nowrap'
          >
            <span>{t("actions.setImage")}</span>
          </Button>
        )}
      </div>

      <BeforeAfterImageDialog
        open={itemDialogOpen}
        onOpenChange={setItemDialogOpen}
        initialValues={item}
        onSubmit={handleSetItem}
        title={item ? t("update.title") : t("create.title")}
        description={item ? t("update.description") : t("create.description")}
      />
    </div>
  );
}