import { observer } from 'mobx-react-lite';

import { useStores } from '@/app/(root)/AppProviders';
import Button, { ButtonShape } from '@/components/button/Button';
import Modal from '@/components/modal/Modal';
import logWebUserEvent from '@/logging/logWebUserEvent';
import { CREATE_VERSION } from '@/utils/constants';

type Props = {
  isOpen: boolean;
  onClose: (wasConfirmed?: boolean) => void;
};

export const DeleteSavedPromptModal = observer(({ isOpen, onClose }: Props) => {
  const { createV2 } = useStores();
  return isOpen ? (
    <Modal
      title={'Are you sure?'}
      onClose={(e) => {
        onClose(false);
        e.preventDefault();
        e.stopPropagation();
      }}
    >
      <div className='py-4 font-medium'>
        Deleting a saved prompt cannot be undone.
      </div>
      <div className='flex w-full flex-row justify-center gap-2'>
        <Button
          shape={ButtonShape.Pill}
          onClick={async (e) => {
            if (createV2.pendingDeletePromptId) {
              const promptId = createV2.pendingDeletePromptId;
              await createV2.deletePrompt(promptId);
              logWebUserEvent({
                actionName: 'DeleteSavedPrompt',
                context: {
                  promptId: promptId,
                  createVersion: CREATE_VERSION,
                },
              });
              onClose(true);
            }
            e.preventDefault();
            e.stopPropagation();
          }}
        >
          Confirm
        </Button>
        <Button
          shape={ButtonShape.Pill}
          onClick={(e) => {
            onClose(false);
            e.preventDefault();
            e.stopPropagation();
          }}
        >
          Cancel
        </Button>
      </div>
    </Modal>
  ) : null;
});