import { useMemo } from 'react';

import { useContextSelector } from '@/hooks/useContextSelector';

import UploadModalV2 from '../../sandbox/UploadModalV2';
import CreateFormContext, {
  AddConditionType,
} from '../../v2/CreateFormContext';
import { AudioActions, CreateFormModals, CreateModes } from '../../v2/types';

export enum CreateUploadModalStates {
  Record = 'record',
  Upload = 'upload',
}

const UploadModal = ({
  handleComplete,
  uploadMode,
  isStudioMode = false,
}: {
  handleComplete: (
    clipId: string | undefined,
    initializationCondition: AudioActions | null
  ) => void;
  onClose: () => void;
  uploadMode: CreateUploadModalStates | null;
  isStudioMode?: boolean;
}) => {
  const mode = useContextSelector(
    CreateFormContext,
    (context) => context.state.global.mode
  );
  return (
    <UploadModalV2
      popoverTopMargin={90}
      isRecordingMode={uploadMode === CreateUploadModalStates.Record}
      autoSaveOnFinalize={isStudioMode}
      onClipInitialized={(
        clipId: string | undefined,
        initializationCondition: AudioActions | null
      ) => {
        if (mode === CreateModes.CHAT) {
          return;
        }
        handleComplete(clipId, initializationCondition);
      }}
    />
  );
};

export const CreateUploadModal = ({
  isStudioMode = false,
  ...props
}: {
  isOpen: boolean;
  onClose: () => void;
  isStudioMode?: boolean;
}) => {
  const addCondition = useContextSelector(
    CreateFormContext,
    (context) => context.addCondition
  );
  const activeModal = useContextSelector(
    CreateFormContext,
    (context) => context.activeModal
  );
  const uploadMode = useMemo(() => {
    if (activeModal === CreateFormModals.AudioRecord) {
      return CreateUploadModalStates.Record;
    } else if (activeModal === CreateFormModals.AudioUpload) {
      return CreateUploadModalStates.Upload;
    }
    return null;
  }, [activeModal]);
  return (
    <UploadModal
      {...props}
      uploadMode={uploadMode}
      isStudioMode={isStudioMode}
      handleComplete={(
        clipId: string | undefined,
        initializationCondition: AudioActions | null
      ) => {
        if (!clipId) return;
        if (initializationCondition === AudioActions.COVER) {
          addCondition(clipId, AddConditionType.COVER);
        } else if (initializationCondition === AudioActions.EXTEND) {
          addCondition(clipId, AddConditionType.EXTEND);
        }
      }}
    />
  );
};