import { Box, CircularProgress, Typography } from '@mui/material';

import { useAtom } from 'jotai';
import { type ReactElement, useCallback, useRef } from 'react';

import { Button } from '../Button';
import { Modal } from '../Modal';
import { itemToDeleteAtom } from './atoms';
import { useDeleteItem } from './hooks/useDeleteItem';
import type { DeleteItem, ItemToDelete } from './models';
import { isAFunction } from './utils';

const DeleteModal = <TData extends { id: number; name: string }>({
  labels,
  deleteEndpoint,
  listingQueryKey,
  modalSize = 'medium'
}: DeleteItem & {
  listingQueryKey: string;
}): JSX.Element => {
  const itemToDeleteRef = useRef<ItemToDelete | null>(null);

  const [itemToDelete, setItemToDelete] = useAtom(itemToDeleteAtom);

  const { isMutating, deleteItem } = useDeleteItem({
    deleteEndpoint,
    listingQueryKey,
    successMessage: labels.successMessage
  });

  const isOpen = Boolean(itemToDelete);

  const close = useCallback(() => {
    setItemToDelete(null);
  }, [setItemToDelete]);

  const confirm = useCallback(() => {
    if (itemToDeleteRef.current) {
      deleteItem(itemToDeleteRef.current).then(close);
    }
  }, [close, deleteItem]);

  if (isOpen) {
    itemToDeleteRef.current = itemToDelete;
  }

  return (
    <Modal onClose={close} open={isOpen} size={modalSize}>
      <Modal.Header>
        {isAFunction(labels.title)
          ? (labels.title as (item: ItemToDelete) => string | ReactElement)(
              itemToDeleteRef.current as TData
            )
          : (labels.title as string | ReactElement)}
      </Modal.Header>
      <Modal.Body>
        <Typography>
          {isAFunction(labels.description)
            ? (
                labels.description as (
                  item: ItemToDelete
                ) => string | ReactElement
              )(itemToDeleteRef.current as TData)
            : (labels.description as string | ReactElement)}
        </Typography>
      </Modal.Body>
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'row',
          gap: 2,
          justifyContent: 'flex-end'
        }}
      >
        {isMutating && <CircularProgress size={20} />}
        <Button disabled={isMutating} onClick={close} variant="ghost">
          {labels.cancel}
        </Button>
        <Button disabled={isMutating} isDanger onClick={confirm}>
          {labels.confirm}
        </Button>
      </Box>
    </Modal>
  );
};

export default DeleteModal;