import {
  Flex,
  Icon,
  Modal,
  ModalBody,
  ModalContent,
  ModalFooter,
  ModalOverlay,
} from '@chakra-ui/react';
import { observer } from 'mobx-react-lite';
import React, { useState } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import { ClipBrowserRegistryContext } from '@/components/clipBrowser/useClipBrowserRegistry';
import { ModalTypes } from '@/components/modal/constants/ModalTypes';
import DeleteClipToast from '@/components/toast/DeleteClipToast';
import { toast } from '@/components/toast/Toast';
import { useModalContext } from '@/context/ModalContext';
import { useContextSelector } from '@/hooks/useContextSelector';
import { WarningIcon } from '@/icons';
import { Clip } from '@/state/clipStore';

import Button, { ButtonVariant } from '../button/Button';
import CloseButton from '../button/CloseButton';
import SpinnerSVG from '../svg/SpinnerSVG';

const DeleteClipModal: React.FC = observer(() => {
  const { menus, clips, trash, playbar } = useStores();
  const { closeModal } = useModalContext();
  const clipChanged = useContextSelector(
    ClipBrowserRegistryContext,
    (context) => context.clipChanged
  );
  const [isDeleting, setIsDeleting] = useState(false);
  const selectedClips = menus.selectedClipIds.map(
    (clipId: string) => clips.clipById[clipId]
  );

  const clipTitle =
    selectedClips && selectedClips.length === 1
      ? selectedClips[0]?.title || selectedClips[0]?.metadata?.tags || ''
      : `${(selectedClips || []).length} songs`;

  const headerText =
    selectedClips && selectedClips.length > 1
      ? 'Are you sure you want to delete these songs?'
      : 'Are you sure you want to delete this song?';

  const onClose = () => {
    closeModal(ModalTypes.DELETE_CLIP);
  };

  const handleConfirmDelete = async () => {
    if (selectedClips) {
      setIsDeleting(true);
      const isDeleted = await clips.deleteClips(
        selectedClips.map((sClip: Clip) => sClip.id)
      );
      if (isDeleted) {
        selectedClips.forEach((sClip: Clip) => {
          if (playbar?.clip?.id === sClip.id) {
            playbar.unsetClip();
          }
          trash.removeFromTrash(sClip.id); // for old TrashStore (backwards compat)
          // Set is_trashed to false so clip fails trash filter and gets removed immediately
          sClip.is_trashed = false;
          clipChanged(sClip); // This will immediately remove from lastClips since !is_trashed fails trash filter
        });
        toast({
          duration: 4000,
          isClosable: true,
          position: 'bottom',
          render: () => <DeleteClipToast clips={selectedClips || []} />,
        });
      }
      setIsDeleting(false);
      onClose();
    }
  };

  return (
    <Modal isOpen onClose={onClose} isCentered size='xl'>
      <ModalOverlay />

      <ModalContent
        bg='var(--color-background-primary)'
        color='var(--color-foreground-primary)'
        borderRadius='32px'
      >
        <Flex justifyContent='space-between' alignItems='center' px={3}>
          <span className='ml-8 pt-8 font-serif text-3xl'>{headerText}</span>
          <Flex mt={-12}>
            <CloseButton onClick={onClose} />
          </Flex>
        </Flex>
        <ModalBody ml={6}>
          <Flex alignItems='center' mb={2}>
            <Icon as={WarningIcon} color='white' mr={2} />
            <span className='font-sans font-bold'>
              This action cannot be undone.
            </span>
          </Flex>
          <span className='mt-4 mb-2 font-sans font-bold'>
            This will remove <b>{clipTitle}</b> from your account.
          </span>
        </ModalBody>
        <ModalFooter className='flex gap-2'>
          <Button variant={ButtonVariant.Primary} onClick={onClose}>
            No, take me back!
          </Button>
          <Button
            onClick={handleConfirmDelete}
            icon={isDeleting && <SpinnerSVG />}
          >
            Yes, I&apos;m sure
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
});

export default DeleteClipModal;