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

import { useStores } from '@/app/(root)/AppProviders';
import { toast } from '@/components/toast/Toast';
import { useModalContext } from '@/context/ModalContext';
import logWebUserEvent from '@/logging/logWebUserEvent';

import Button, { ButtonVariant } from '../button/Button';
import Modal from './Modal';
import { ModalTypes } from './constants/ModalTypes';

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

  const modalData = getModalData(ModalTypes.CONFIRM_PIN_REPLACEMENT);

  const handleClose = () => {
    closeModal(ModalTypes.CONFIRM_PIN_REPLACEMENT);
  };

  const handleConfirm = async () => {
    const updatePinnedClip = async () => {
      if (modalData?.clipId) {
        const isPinned = clipsStore.isClipPinned(modalData.clipId);
        await clipsStore.pinClipToProfile({
          clipId: modalData.clipId,
        });

        logWebUserEvent({
          actionName: 'SongMenuPinToProfileClicked',
          context: {
            clipId: modalData.clipId,
            isPinned: !isPinned,
          },
        });

        toast({
          title: `This song has been ${isPinned ? 'unpinned from Profile' : 'pinned to Profile'}.`,
          duration: 2000,
          isClosable: true,
        });
      }
    };

    await updatePinnedClip();
    closeModal(ModalTypes.CONFIRM_PIN_REPLACEMENT);
  };

  if (!modalData) return null;

  return (
    <Modal
      onClose={handleClose}
      title={modalData.title}
      wrapperClasses='overflow-y-auto'
      contentWrapperClasses='mx-[24px]'
    >
      <div className='text-foreground-primary'>{modalData.message}</div>
      <div className='mt-4 flex items-center justify-end gap-2 px-4 pb-4'>
        <Button onClick={handleClose}>Cancel</Button>
        <Button variant={ButtonVariant.Primary} onClick={handleConfirm}>
          Confirm
        </Button>
      </div>
    </Modal>
  );
});

export default ConfirmationModal;