import { type FC, useCallback, useState } from 'react';

import { Dialog, type DialogProps } from '@mui/material';

type OnCloseType = DialogProps['onClose'];

/**
 * Renders a MUI Dialog with a given content component and manages its open/close state.
 * @deprecated Use `useDialogLayer` or `useDialogLayerItem` instead
 */
function useModal<T>(
  ModalContentComponent: FC<T>,
  dialogProps?: Partial<DialogProps>,
  extraProps?: Partial<T>,
): {
  modal: React.ReactNode;
  closeModal: () => void;
  showModal: (props?: Partial<T>) => void;
} {
  const [open, setOpen] = useState(false);
  const [modalContentProps, setModalContentProps] = useState<Partial<T>>();

  const closeModal = useCallback(() => setOpen(false), []);
  const showModal = useCallback((props: Partial<T> = {}) => {
    setModalContentProps(props);
    setOpen(true);
  }, []);

  const { onClose: dialogOnClose, ...restDialogProps } = dialogProps ?? {};

  return {
    modal: (
      <Dialog
        open={open}
        onClose={(event, reason) => {
          if (
            restDialogProps?.disableEscapeKeyDown &&
            reason === 'escapeKeyDown'
          ) {
            return;
          }
          if (dialogOnClose) {
            (dialogOnClose as OnCloseType)?.(event, reason);
          }
          closeModal();
        }}
        PaperProps={{
          sx: {
            border: theme =>
              `1px solid ${theme.palette.new.border.neutral.default}`,
            borderRadius: theme => theme.shape.borderRadiusL,
            boxShadow: 'none',
          },
        }}
        {...restDialogProps}
      >
        <ModalContentComponent
          onClose={closeModal}
          {...(modalContentProps as T)}
          {...extraProps}
        />
      </Dialog>
    ),
    closeModal,
    showModal,
  };
}

export { useModal };