'use client';

import { Modal, ModalBody, ModalContent, ModalOverlay } from '@chakra-ui/react';
import '@uppy/audio/dist/style.min.css';
import '@uppy/core/dist/style.min.css';
import '@uppy/dashboard/dist/style.min.css';
import { observer } from 'mobx-react-lite';
import { useRef, useState } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import CloseButton from '@/components/button/CloseButton';
import UploadAudioPopover from '@/components/popover/UploadAudioPopover';
import useDisclosure from '@/hooks/useDisclosure';
import { UploadIcon } from '@/icons';
import { TransactionLogger } from '@/logging/logWebUserEvent';
import { GenParams } from '@/state/clipStore';
import { GenerateFormStore } from '@/state/createStore';

import VideoUploader from './VideoUploader';

const VideoUploadModal = observer(
  ({
    popoverTopMargin,
    fromMobileLibrary,
    customHeight,
    customWidth,
    iconSize,
    fontSize,
    state,
    onGenerate,
  }: {
    popoverTopMargin?: number;
    fromMobileLibrary?: boolean;
    customHeight?: string;
    customWidth?: string;
    iconSize?: number;
    fontSize?: string;
    state: GenerateFormStore;
    onGenerate: (state: GenParams, transactionLogger: TransactionLogger) => any;
  }) => {
    useStores();
    const { isOpen, onOpen, onClose } = useDisclosure();
    const [shouldConfirmClose, setShouldConfirmClose] = useState(false);
    const [isConfirmingClose, setIsConfirmingClose] = useState(false);
    const buttonRef = useRef<any>(undefined);

    const {
      isOpen: isUploadTooltipOpen,
      onOpen: onOpenUploadTooltip,
      onClose: onCloseUploadTooltip,
    } = useDisclosure();

    return (
      <>
        <button
          aria-label='Upload Video'
          onClick={onOpen}
          className={`upload-video-button bg-quaternary font-sans text-foreground-primary ${fontSize} mb-4 rounded-full px-4 font-medium shadow-lg hover:bg-primary/30 ${fromMobileLibrary ? '-ml-2' : ''} ${customHeight} ${customWidth}`}
        >
          <div className='flex h-full w-full items-center justify-center'>
            <UploadIcon
              className={`w-${iconSize} h-${iconSize} ${!fromMobileLibrary ? 'mr-2' : 'mr-0'} brightness-0 invert filter`}
            />
            <span className='text-md whitespace-nowrap'>
              {fromMobileLibrary ? '' : 'Upload Video'}
            </span>
          </div>
        </button>

        <Modal
          isOpen={isOpen}
          onClose={() => {
            if (isConfirmingClose || !shouldConfirmClose) {
              setIsConfirmingClose(false);
              onClose();
            } else {
              setIsConfirmingClose(true);
            }
          }}
          isCentered
        >
          <ModalOverlay bgColor={'var(--chakra-colors-whiteAlpha-300)'} />
          <ModalContent
            bg='var(--color-background-primary)'
            color='var(--color-foreground-primary)'
          >
            <div className='flex items-center justify-between px-3'>
              <span className='pt-8 pl-4 font-serif text-3xl'>
                Upload Video
              </span>
              <CloseButton onClick={onClose} />
            </div>
            <ModalBody>
              <VideoUploader
                isConfirmingClose={isConfirmingClose}
                setIsConfirmingClose={setIsConfirmingClose}
                onClose={() => {
                  if (isConfirmingClose || !shouldConfirmClose) {
                    setIsConfirmingClose(false);
                    onClose();
                  } else {
                    setIsConfirmingClose(true);
                  }
                }}
                onFinish={async (
                  uploadId: string | null,
                  title: string,
                  imageUrl: string,
                  uploadType: string | null,
                  s3Id: string | null,
                  transactionLogger: TransactionLogger
                ) => {
                  console.log(uploadId, title, imageUrl, uploadType, s3Id);
                  state.setGenerationType('VIDEO');
                  state.setVideoUploadId(uploadId || '');
                  onGenerate(state, transactionLogger);
                  state.reset();
                  onClose();
                }}
                setShouldConfirmClose={setShouldConfirmClose}
              />
            </ModalBody>
          </ModalContent>
        </Modal>
        <UploadAudioPopover
          buttonRef={buttonRef}
          isOpen={isUploadTooltipOpen}
          onClose={onCloseUploadTooltip}
          onOpen={onOpenUploadTooltip}
          topMargin={popoverTopMargin}
        />
      </>
    );
  }
);

export default VideoUploadModal;