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

export default function MapNode(props: NodeViewProps) {
  const { postId, title, description, variant } = props.node.attrs.props ?? {};

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

  const handleSetMap = (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.MAP}
        </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='map border-t-client-red border-t bg-neutral-100 p-4'>
            {title && <h5 className='font-bold'>{title}</h5>}
            {description && (
              <p className='text-xs whitespace-pre-line'>{description}</p>
            )}
            <Image
              src='/images/dashboard/map-preview.png'
              alt='Map'
              width={1000}
              height={600}
              className='max-h-60 w-full object-cover'
              quality={ImageQuality.HIGH}
            />
          </div>
        ) : (
          <Button
            variant='outline'
            onClick={() => setOpen(true)}
            type='button'
            className='justify-start'
          >
            <span>Set map</span>
          </Button>
        )}
      </div>
      <MapSettingsDialog
        open={open}
        onOpenChange={setOpen}
        onSubmit={handleSetMap}
        initialValues={{
          title: title || '',
          description: description || '',
          variant: variant || WidgetPosition.CENTER,
          postId: postId || ''
        }}
      />
    </div>
  );
}