/* eslint-disable react/no-array-index-key -- keeping unique s3 images */
/* eslint-disable camelcase -- animation_url */
import {
  Button,
  ButtonGroup,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Text,
  FormLabel,
  Heading,
  Box,
  Tabs,
  TabList,
  TabPanels,
  Tab,
  TabPanel,
} from "@chakra-ui/react";

import { EditRecordForm } from "./EditRecordForm";
import { UseEditRecordModalReturn } from "./use-edit-record-modal";
import { TData } from "../types";

export interface EditRecordModalProps<T extends TData>
  extends UseEditRecordModalReturn<T> {}

export const EditRecordModalCustomIsLoading = <T extends TData>({
  title,
  form,
  onFormSubmit,
  onFormError,
  disclosure: { onClose, isOpen },
  formKeys,
  isLoading,
}: Omit<EditRecordModalProps<T>, "mutationResponse"> & {
  isLoading: boolean;
}) => (
  <Modal isOpen={isOpen} onClose={onClose} size="xl">
    <ModalOverlay />
    <ModalContent>
      <form onSubmit={form.handleSubmit(onFormSubmit, onFormError)}>
        <ModalHeader>{title}</ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          <EditRecordForm<T> form={form} formKeys={formKeys} />
        </ModalBody>

        <ModalFooter>
          <ButtonGroup>
            <Button
              size="sm"
              variant="ghost"
              onClick={() => {
                form.reset();
                onClose();
              }}
            >
              Cancel
            </Button>
            <Button
              isDisabled={!form.formState.isDirty}
              size="sm"
              colorScheme="green"
              type="submit"
              isLoading={isLoading}
            >
              Save
            </Button>
          </ButtonGroup>
        </ModalFooter>
      </form>
    </ModalContent>
  </Modal>
);

export const EditRecordModal = <T extends TData>({
  mutationResponse,
  ...props
}: EditRecordModalProps<T>) => (
  <EditRecordModalCustomIsLoading
    {...props}
    isLoading={mutationResponse.isPending}
  />
);
