'use client';

import React, { useState } from 'react';
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogTitle,
  DialogDescription,
} from '@/components/ui/dialog';
import CommonImage from '@/components/common/CommonImage';
import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
import AddForm from '../forms/AddForm';
import { BucketProp, fnEmpty } from '@/types';

interface AddButtonProps {
  bucket: BucketProp['bucket'];
  onSuccess?: fnEmpty;
}

const AddButton: React.FC<AddButtonProps> = ({ bucket, onSuccess }) => {
  const [loadForm, setLoadForm] = useState(false);
  const [isOpen, setIsOpen] = useState(false);

  const handleOpenChange = (open: boolean) => {
    setIsOpen(open);
    if (open) setLoadForm(true);
    const el = document.querySelector('.table-menu-dropdown-widget');
    el?.classList.add('unactive');
  };

  return (
    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
      <DialogTrigger asChild>
        <button
          type="button"
          aria-label={`Add new ${bucket.heading}`}
          className="add-icn wo-fts-filter-bts flex justify-center items-center p-2 hover:bg-gray-100 rounded transition-colors"
        >
          <span>
            <CommonImage
              src="/main/add-icn.webp"
              width={20}
              height={20}
              alt=""
              aria-hidden="true"
              classname="add-icon"
            />
          </span>{' '}
          Add
          <VisuallyHidden>Add New {bucket.heading}</VisuallyHidden>
        </button>
      </DialogTrigger>
      <DialogContent
        className="z-[9999] w-full max-w-7xl p-0 m-0 table-modal-settings modal-common-widget"
        onInteractOutside={(e) => e.preventDefault()}
        onEscapeKeyDown={(e) => e.preventDefault()}
      >
        <DialogTitle className="p-5 modal-header">
          Add New {bucket.heading}
        </DialogTitle>
        <DialogDescription asChild>
          <div className="sr-only">Form for adding new {bucket.heading}</div>
        </DialogDescription>
        {loadForm && (
          <AddForm
            bucket={bucket}
            onSuccess={onSuccess}
            setIsOpen={setIsOpen}
          />
        )}
      </DialogContent>
    </Dialog>
  );
};

export default React.memo(AddButton);