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: () => void;
};

export const OverwriteSavedPromptModal = observer(
  ({ isOpen, onClose }: Props) => {
    const { createV2 } = useStores();
    return isOpen ? (
      <Modal title={'Overwrite saved prompt?'} onClose={onClose}>
        <div className='flex w-full flex-row justify-center gap-2 pt-8'>
          <Button
            shape={ButtonShape.Pill}
            onClick={() => {
              createV2.savePrompt(
                {
                  ...(!!createV2.promptId ? { id: createV2.promptId } : {}),
                  ...createV2.pendingSavedPrompt,
                }
                //addMenuButtonRef
              );
              createV2.setIsPromptSaveable(false);
              logWebUserEvent({
                actionName: 'SavePrompt',
                context: {
                  isOverwrite: true,
                  promptId: createV2.promptId || undefined,
                  createVersion: CREATE_VERSION,
                },
              });
              onClose();
            }}
          >
            Overwrite
          </Button>
          <Button
            shape={ButtonShape.Pill}
            onClick={() => {
              if (createV2.pendingSavedPrompt) {
                createV2.savePrompt(createV2.pendingSavedPrompt);
                createV2.setIsPromptSaveable(false);
                logWebUserEvent({
                  actionName: 'SavePrompt',
                  context: {
                    isOverwrite: false,
                    promptId: undefined,
                    createVersion: CREATE_VERSION,
                  },
                });
                onClose();
              }
            }}
          >
            Save New Prompt
          </Button>
        </div>
      </Modal>
    ) : null;
  }
);