'use client';

import React, { useState } from 'react';
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogTitle,
  DialogDescription,
} from '@/components/ui/dialog';
import CommonImage from '@/components/common/CommonImage';
import { TableProps } from '@/types';
import TableSettingsForm from '../forms/TableSettingsForm';

const TableSettings: React.FC<TableProps> = ({
  bucket,
  tableData,
  handlePaginatedRecords,
}) => {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpenChange = (open: boolean) => {
    setIsOpen(open);
  };

  return (
    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
      <DialogTrigger asChild>
        <button
          type="button"
          aria-label="Table settings"
          className="setting-icn wo-fts-filter-bts flex items-center justify-center p-2 hover:bg-gray-100 rounded transition-colors"
        >
          <CommonImage
            src="/main/setting-icn.webp"
            width={20}
            height={20}
            alt="Table Settings"
            aria-hidden="true"
            classname="setting-icon"
          />
        </button>
      </DialogTrigger>
      <DialogContent
        className="w-full max-w-7xl p-0 m-0 table-modal-settings modal-common-widget modal-DialogContent-table-settings"
        onInteractOutside={(e) => e.preventDefault()}
        onEscapeKeyDown={(e) => e.preventDefault()}
      >
        <div className="relative">
          <DialogTitle className="p-5 modal-header">
            Table Settings - {bucket.heading}
          </DialogTitle>
          <DialogDescription className="px-5 text-sm text-muted-foreground">
            {''}
          </DialogDescription>
        </div>

        {isOpen && (
          <TableSettingsForm
            bucket={bucket}
            tableData={tableData}
            handlePaginatedRecords={handlePaginatedRecords}
            setIsOpen={setIsOpen}
          />
        )}
      </DialogContent>
    </Dialog>
  );
};

export default React.memo(TableSettings);