'use client';

import { Modal, 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 React, { useContext, useEffect, useRef } from 'react';

import UploadAudioPopover from '@/components/popover/UploadAudioPopover';
import useDisclosure from '@/hooks/useDisclosure';

import UploadStateContext from '../uploaderV2/UploadStateContext';
import Uploader from '../uploaderV2/UploaderV2';
import { AudioActions } from '../v2/types';

const UploadModalNew = observer(
  ({
    popoverTopMargin,
    isRecordingMode,
    renderButton,
    onClipInitialized,
    skipFinalize,
    autoSaveOnFinalize,
    finalizeMessage,
  }: {
    popoverTopMargin?: number;
    isRecordingMode?: boolean;
    renderButton?: (onOpen: () => void) => React.ReactElement;
    onClipInitialized?: (
      clipId: string,
      initializationCondition: AudioActions | null
    ) => void;
    skipFinalize?: boolean;
    autoSaveOnFinalize?: boolean;
    finalizeMessage?: string;
  }) => {
    const uploadState = useContext(UploadStateContext);
    const buttonRef = useRef<any>(undefined);

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

    useEffect(() => {
      if (isRecordingMode !== undefined) {
        uploadState.setIsRecordingMode(isRecordingMode);
      }
    }, [isRecordingMode]);

    useEffect(() => {
      if (onClipInitialized !== undefined) {
        uploadState.setOnClipInitializedCallback(
          () =>
            (clipId: string, initializationCondition: AudioActions | null) =>
              onClipInitialized(clipId, initializationCondition as AudioActions)
        );
      }
    }, []);

    return (
      <>
        {renderButton
          ? renderButton(() => {
              uploadState.setIsUploadInProgress(true);
            })
          : null}
        <Modal
          isOpen={uploadState.isUploadInProgress}
          onClose={() => {
            uploadState.attemptClose();
          }}
          isCentered
        >
          <ModalOverlay />
          <ModalContent
            // Background important is required because chakra overrides className
            className='bg-background-secondary! text-foreground-primary'
            borderRadius={'20px'}
            h={'600px'}
            maxW={'500px'}
          >
            <Uploader
              skipFinalize={skipFinalize}
              autoSaveOnFinalize={autoSaveOnFinalize}
              finalizeMessage={finalizeMessage}
            />
          </ModalContent>
        </Modal>
        <UploadAudioPopover
          buttonRef={buttonRef}
          isOpen={isUploadTooltipOpen}
          onClose={onCloseUploadTooltip}
          onOpen={onOpenUploadTooltip}
          topMargin={popoverTopMargin}
        />
      </>
    );
  }
);

export default UploadModalNew;