import {
  Button,
  Flex,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Text,
} from '@chakra-ui/react';
import React, { useEffect, useRef, useState } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import { DownloadIcon, RotateRightIcon } from '@/icons';
import { Clip } from '@/state/clipStore';
import { glassmorphicEffect } from '@/utils/constants';
import { downloadMedia } from '@/utils/download';

const GenerateVideoModal: React.FC<{
  clip: Clip;
  isOpen: boolean;
  onClose: () => void;
}> = ({ clip, isOpen, onClose }) => {
  const { session, library, clips: clipsStore } = useStores();
  const [isLoading, setIsLoading] = useState(false);
  const [lastUpdatedAt, setLastUpdatedAt] = useState<number | null>(null);
  const videoRef = useRef<any>(null);

  const handleGenerate = async () => {
    setIsLoading(true);
    await library.apiClient.POST('/api/video/generate/{clip_id}/', {
      params: { path: { clip_id: clip?.id } },
    });
    handleGetStatus();
  };
  const handleGetStatus = async (retries: number = 10) => {
    const { data } = await library.apiClient.GET(
      '/api/video/generate/{clip_id}/status/',
      {
        params: { path: { clip_id: clip?.id } },
      }
    );
    if ((data as any)?.status === 'complete') {
      setIsLoading(false);
      setLastUpdatedAt(new Date().getTime());
      if (clipsStore.clipById[clip?.id]) {
        clipsStore.clipById[clip?.id].video_url = (data as any)?.video_url;
      }
      requestAnimationFrame(() => videoRef.current && videoRef.current.load());
    } else {
      if (retries === 0) {
        setIsLoading(false);
        return;
      }
      setTimeout(() => handleGetStatus(retries - 1), 4000);
    }
  };
  useEffect(() => {
    if (isOpen && isLoading) {
      handleGetStatus();
    }
  }, [isOpen, isLoading]);
  return (
    <Modal isOpen={isOpen} onClose={onClose} isCentered size='xl'>
      <ModalOverlay />

      <ModalContent sx={{ ...glassmorphicEffect }} borderRadius='8px'>
        <ModalHeader>Generate Video</ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          <Flex flexDirection={'row'}>
            <Flex alignItems='center' mb={2} minW='200px'>
              <video
                controls
                width={'200px'}
                src={
                  clipsStore.clipById[clip?.id]
                    ? `${clipsStore.clipById[clip?.id]?.video_url}?time=${lastUpdatedAt}`
                    : undefined
                }
                ref={videoRef}
              />
            </Flex>
            <Flex flexDirection='column' mx={'auto'} px={8}>
              <Text fontSize='sm' width='100%' mb={4}>
                Regenerate the video when you are done updating the song&apos;s
                title and album art. The video will be embedded when the song
                link is posted.
              </Text>
              <Flex flexDirection='column' textAlign={'center'}>
                <Button
                  leftIcon={<DownloadIcon />}
                  isDisabled={isLoading}
                  width='100%'
                  mb={4}
                  onClick={() =>
                    downloadMedia(library.apiClient, clip, 'video', session)
                  }
                >
                  Download Video File
                </Button>
                <Button
                  leftIcon={<RotateRightIcon />}
                  onClick={handleGenerate}
                  isLoading={isLoading}
                  isDisabled={clip?.user_id !== session.user?.id}
                  width='100%'
                >
                  Regenerate Video
                </Button>
              </Flex>
            </Flex>
          </Flex>
        </ModalBody>
        <ModalFooter>
          <Button colorScheme='red' onClick={onClose}>
            Cancel
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
};

export default GenerateVideoModal;