import {
  Checkbox,
  Flex,
  Modal,
  ModalBody,
  ModalContent,
  ModalFooter,
  ModalOverlay,
  Stack,
} from '@chakra-ui/react';
import { ChangeEvent, useState } from 'react';

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

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

const FlagModal: React.FC = () => {
  const { closeModal, getModalData } = useModalContext();
  const { clips } = useStores();
  const [userReasons, setUserReasons] = useState<string[]>([]);
  const [isFlagging, setIsFlagging] = useState(false);

  const modalData = getModalData(ModalTypes.FLAG_CLIP);

  const clipId = modalData?.clipId;
  const clipTitle = modalData?.clipTitle;
  if (!clipId) {
    console.error('Flag Modal song data is missing');
    return null;
  }

  const onClose = () => closeModal(ModalTypes.FLAG_CLIP);

  const handleSubmit = async () => {
    setIsFlagging(true);
    try {
      await clips.flagClip(clipId, userReasons.join(','));
      onClose();
      setUserReasons([]);
      setIsFlagging(false);
    } catch (error) {
      toast({
        title: 'Error flagging song.',
        description: 'Something went wrong. Please try again later.',
        status: 'error',
        duration: 5000,
        isClosable: true,
      });
      setIsFlagging(false);
    }
  };

  const handleCheckEvent = (flag: string) => {
    return (e: ChangeEvent<HTMLInputElement>) => {
      if (e.target.checked) {
        setUserReasons([...userReasons, flag]);
      } else {
        setUserReasons(userReasons.filter((reason: string) => reason !== flag));
      }
    };
  };

  return (
    <Modal isOpen={true} onClose={onClose} isCentered size='xl'>
      <ModalOverlay />
      <ModalContent
        bg='var(--color-background-primary)'
        color='var(--color-foreground-primary)'
        borderRadius='32px'
        position='relative'
      >
        <Flex justifyContent='space-between' alignItems='center' px={3}>
          <span className='py-8 pl-4 font-serif text-2xl'>
            Please provide reasons for flagging <b>{clipTitle}</b>
          </span>
          <Flex mt={-10}>
            <CloseButton onClick={onClose} />
          </Flex>
        </Flex>
        <ModalBody pb={6}>
          <Stack>
            <Checkbox
              size='lg'
              fontFamily={'Neue Montreal'}
              name='flag_audio_quality'
              onChange={handleCheckEvent('flag_audio_quality')}
              colorScheme='gray'
              borderColor='var(--color-border-primary)'
            >
              Low audio quality
            </Checkbox>
            <Checkbox
              size='lg'
              fontFamily={'Neue Montreal'}
              name='flag_lyrics_following'
              onChange={handleCheckEvent('flag_lyrics_following')}
              colorScheme='gray'
              borderColor='var(--color-border-primary)'
            >
              Doesn&apos;t follow lyrics
            </Checkbox>
            <Checkbox
              size='lg'
              fontFamily={'Neue Montreal'}
              name='flag_style_following'
              onChange={handleCheckEvent('flag_style_following')}
              colorScheme='gray'
              borderColor='var(--color-border-primary)'
            >
              Doesn&apos;t follow style instructions
            </Checkbox>
            <Checkbox
              size='lg'
              fontFamily={'Neue Montreal'}
              name='flag_song_structure'
              onChange={handleCheckEvent('flag_song_structure')}
              colorScheme='gray'
              borderColor='var(--color-border-primary)'
            >
              Poor structure
            </Checkbox>
            <Checkbox
              size='lg'
              fontFamily={'Neue Montreal'}
              name='flag_other'
              onChange={handleCheckEvent('flag_other')}
              colorScheme='gray'
              borderColor='var(--color-border-primary)'
            >
              Other
            </Checkbox>
          </Stack>
        </ModalBody>
        <ModalFooter className='flex gap-2'>
          <Button
            onClick={() => {
              onClose();
              setUserReasons([]);
            }}
          >
            Cancel
          </Button>
          <Button
            variant={ButtonVariant.Primary}
            onClick={handleSubmit}
            icon={isFlagging && <SpinnerSVG />}
          >
            Submit
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
};

export default FlagModal;