import { Modal, ModalContent, ModalProps } from '@chakra-ui/react';
import clsx from 'clsx';
import { observer } from 'mobx-react-lite';

import { useStores } from '@/app/(root)/AppProviders';
import { CloseIcon } from '@/icons';
import logWebUserEvent from '@/logging/logWebUserEvent';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '../button/Button';
import LyricsCowriteEditor from './LyricsCowriteEditor';

// this needs to be wrapped in `observer` because some of the hooks it calls expect to be able to reach the global stores
const LyriscEditModal = observer((props: Omit<ModalProps, 'children'>) => {
  const { genForm, createV2, session } = useStores();

  return (
    <Modal {...props} size='4xl'>
      <div className='fixed inset-0 z-1400 bg-background-dark-overlay' />
      <ModalContent
        bg='var(--color-background-secondary)'
        overflow='hidden'
        height='calc(100vh - 130px)'
      >
        <Button
          variant={ButtonVariant.Tertiary}
          size={ButtonSize.Mini}
          shape={ButtonShape.Rectangle}
          className={clsx('absolute top-1 right-1 z-10 rounded-lg py-2')}
          onClick={() => {
            logWebUserEvent({
              actionName: 'LyricsCowriteEditorCloseButtonClicked',
              context: {
                generateInstanceToken: genForm.createSessionToken,
              },
            });
            props.onClose();
          }}
        >
          <CloseIcon className='text-secondary' />
        </Button>
        <LyricsCowriteEditor
          content={{
            title: genForm.title,
            lyrics: genForm.lyrics,
          }}
          onSubmit={(title, lyrics) => {
            genForm.setTitle(title);
            genForm.setLyrics(lyrics);
            if (session.flags?.['create-v1.5']) {
              createV2.setActiveTitle(title);
              createV2.setActiveLyrics(lyrics);
            }
            props.onClose();
          }}
        />
      </ModalContent>
    </Modal>
  );
});
export default LyriscEditModal;