'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 { Button } from '@/components/ui/button';
import EditForm from './EditForm';
import {
  UnknownRecord,
  fnAny,
  HandlePaginatedRecords,
  BucketProp,
} from '@/types';
import { store } from '@/store/store';
type EditButtonProps = {
  bucket: BucketProp['bucket'];
  recordData?: UnknownRecord;
  handlePaginatedRecords: HandlePaginatedRecords;
  handleCloseTooltip: () => void;
  setActiveRow: fnAny;
  props?: UnknownRecord;
};
const EditButton = ({
  bucket,
  recordData,
  handlePaginatedRecords,
  setActiveRow,
  props,
}: EditButtonProps) => {
  const [loadForm, setLoadForm] = useState<boolean>(false);
  const [open, setOpen] = useState<boolean>(false);
  const handleOnSuccess = () => {
    handlePaginatedRecords(store.getState().tableSettings.current_page, {});
    setOpen(false);
  };
  return (
    <>
      <Dialog
        open={open}
        onOpenChange={(isOpen) => {
          setOpen(isOpen);
          if (isOpen) {
            setLoadForm(true);
          } else {
            setActiveRow(null);
          }
        }}
      >
        <DialogTrigger
          onClick={() => {
            setOpen(true);
          }}
          asChild
        >
          <Button className="button-action">
            <CommonImage
              src={(props?.icon as string) || '/main/edit-icon.png'}
              width={15}
              height={15}
              alt={(props?.alt as string) || 'Edit Record'}
              classname="info-icon"
            />
          </Button>
        </DialogTrigger>
        <DialogContent
          className="z-50 w-full cross-arrow max-w-7xl p-0 m-0 table-modal-settings modal-common-widget"
          onInteractOutside={(e) => e.preventDefault()}
          onEscapeKeyDown={(e) => e.preventDefault()}
          onClick={(e) => e.stopPropagation()}
          data-dialog-id="edit-dialog"
        >
          <DialogTitle className="p-5 modal-header">
            Edit - {bucket.heading as string}
          </DialogTitle>
          <div
            className="dialog-close"
            onClick={() => {
              setOpen(false);
              setActiveRow(null);
            }}
          >
            <CommonImage
              src="/main/cross-arrow.webp"
              width={15}
              height={15}
              alt="Close"
              classname="dialog-close-img"
            />
          </div>
          <DialogDescription>{''}</DialogDescription>
          <VisuallyHidden>
            <DialogTitle>Hidden Title</DialogTitle>
          </VisuallyHidden>
          {loadForm && (
            <EditForm
              bucket={bucket}
              recordData={recordData}
              onSuccess={() => handleOnSuccess()}
              setOpen={setOpen}
            />
          )}
        </DialogContent>
      </Dialog>
    </>
  );
};
export default EditButton;