import { useAtomValue, useSetAtom } from 'jotai';
import { isNotNil } from 'ramda';
import { useCallback, useMemo } from 'react';

import { Modal } from '../..';
import { askBeforeCloseFormModalAtom, openFormModalAtom } from '../atoms';
import { useGetItem } from '../hooks/useGetItem';
import type { Form as FormModel, GetItem } from '../models';
import Buttons from './Buttons';

const UpdateModal = <TItem extends { id: number; name: string }, TItemForm>({
  decoder,
  baseEndpoint,
  itemQueryKey,
  adapter,
  Form,
  title,
  modalSize = 'medium'
}: GetItem<TItem, TItemForm> &
  Pick<FormModel<TItem, TItemForm>, 'Form' | 'modalSize'> & {
    title: string;
  }) => {
  const setAskBeforeCloseFormModal = useSetAtom(askBeforeCloseFormModalAtom);

  const openFormModal = useAtomValue(openFormModalAtom);

  const { initialValues, isLoading } = useGetItem({
    adapter,
    baseEndpoint,
    decoder,
    id: openFormModal,
    itemQueryKey
  });

  const isModalOpen = useMemo(
    () => isNotNil(openFormModal) && openFormModal !== 'add',
    [openFormModal]
  );

  const openAskBeforeClose = useCallback(
    () => setAskBeforeCloseFormModal(true),
    [setAskBeforeCloseFormModal]
  );

  return (
    <Modal onClose={openAskBeforeClose} open={isModalOpen} size={modalSize}>
      <Modal.Header>{title}</Modal.Header>
      <Modal.Body>
        <Form
          Buttons={Buttons}
          initialValues={initialValues}
          isLoading={isLoading}
        />
      </Modal.Body>
    </Modal>
  );
};

export default UpdateModal;