import { observer } from 'mobx-react-lite';
import React, { useCallback } from 'react';
import { useTranslation } from 'react-i18next';

import { useStores } from '@/app/(root)/AppProviders';
import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import { useModalContext } from '@/context/ModalContext';
import logWebUserEvent from '@/logging/logWebUserEvent';

import Modal from './Modal';
import { ModalTypes } from './constants/ModalTypes';
import { showLinkOnlyToast } from './publishSong/publishSongToasts';

const UnpublishSongModal: React.FC = observer(() => {
  const { clips: clipsStore, session } = useStores();
  const { closeModal, getModalData } = useModalContext();

  const { t } = useTranslation();

  const modalData = getModalData(ModalTypes.UNPUBLISH_SONG);
  const clip = modalData ? clipsStore.clipById[modalData.clipId] : undefined;

  const handleUnpublish = useCallback(async () => {
    if (clip) {
      const clipId = clip.id;
      logWebUserEvent({
        actionName: 'UnpublishSongModalUnpublishClicked',
        principalObjectType: 'song',
        principalObjectValue: clipId,
        ...(clip?.metadata.contest_ids?.[0] && {
          context: {
            contestId: clip?.metadata.contest_ids?.[0] ?? null,
          },
        }),
      });

      const toSubmit: Promise<unknown>[] = [
        clipsStore.setClipVisibility({
          clipId,
          isPublic: false,
          submitToContest: false,
        }),
      ];
      if (clipsStore.isClipPinned(clipId)) {
        toSubmit.push(
          clipsStore.pinClipToProfile({
            clipId,
            submitToContest: false,
          })
        );
      }
      await Promise.all(toSubmit);
      showLinkOnlyToast({
        clip,
        session,
      });
    }
    closeModal(ModalTypes.UNPUBLISH_SONG);
  }, [closeModal, clip, clipsStore, session]);

  const handleClose = useCallback(() => {
    closeModal(ModalTypes.UNPUBLISH_SONG);
  }, [closeModal]);

  return (
    <Modal
      onClose={handleClose}
      showCloseButton={false}
      title={t('song.unpublishModalTitle')}
      titleClassName='font-sans font-medium text-center text-xl pt-8 px-8 whitespace-normal'
      titleWrapperClasses='justify-center'
      disablePadding
      className='p-2 md:p-0'
      wrapperClasses='flex flex-col gap-4 overflow-y-auto px-8 pb-8'
    >
      <div className='pb-4 text-center font-sans text-base text-foreground-secondary'>
        {clip?.has_hook
          ? t('song.unpublishModalBodyHook')
          : t('song.unpublishModalBody')}
      </div>
      <div className='flex flex-row-reverse flex-wrap items-center justify-center gap-2'>
        <div className='flex-1'>
          <Button
            className='w-full'
            shape={ButtonShape.Pill}
            size={ButtonSize.Medium}
            variant={ButtonVariant.Primary}
            onClick={handleUnpublish}
          >
            {t('songActions.unpublish')}
          </Button>
        </div>
        <div className='flex-1'>
          <Button
            className='w-full'
            shape={ButtonShape.Pill}
            size={ButtonSize.Medium}
            variant={ButtonVariant.Standard}
            onClick={handleClose}
          >
            {t('cta.cancel')}
          </Button>
        </div>
      </div>
    </Modal>
  );
});

export default UnpublishSongModal;