'use client';

import { noop } from 'lodash-es';
import { usePathname, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import { SimpleSlider } from '@/app/(root)/create/createV2/SimpleSlider';
import { ModalTypes } from '@/components/modal/constants/ModalTypes';
import { toast } from '@/components/toast/Toast';
import { useModalContext } from '@/context/ModalContext';
import { useContextSelector } from '@/hooks/useContextSelector';
import { Clip } from '@/state/clipStore';
import { DEFAULT_VARIATIONS_MODEL } from '@/utils/constants';
import { eventLogger } from '@/utils/event-logger';
import { ActionName } from '@/utils/event-names';

import Button, { ButtonSize, ButtonVariant } from '../button/Button';
import { ClipBrowserRegistryContext } from '../clipBrowser/useClipBrowserRegistry';
import Modal from './Modal';

const UpsampleModelSelectModal: React.FC = () => {
  const { session, clips } = useStores();
  const { closeModal, getModalData } = useModalContext();
  const pathname = usePathname();
  const router = useRouter();

  const modalData = getModalData(ModalTypes.UPSAMPLE_MODEL_SELECT);
  const clip = modalData
    ? (clips.getClipById(modalData.clipId) as Clip)
    : undefined;

  // const upsampleModels = session
  //   .getViewableModels()
  //   .filter((model: ModelType) => model?.model_subtype === 'U');

  const [freedomParam, setFreedomParam] = useState(0.0);
  // const [strength, setStrength] = useState(0.5);
  // const [styles, setStyles] = useState('');
  const [clarity, setClarity] = useState(0.5);
  const [tone, setTone] = useState(0.5);
  const [stereoWidth, setStereoWidth] = useState(0.5);

  // const [selectedModel, setSelectedModel] = useState(
  //   upsampleModels?.[0]?.external_key || DEFAULT_VARIATIONS_MODEL
  // );

  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        e.preventDefault();
        e.stopPropagation();
        closeModal(ModalTypes.UPSAMPLE_MODEL_SELECT);
      }
    };
    window.addEventListener('keydown', handleEscape, true);
    return () => window.removeEventListener('keydown', handleEscape, true);
  }, [closeModal]);

  // const upsampleModelOptions = upsampleModels.map((model: ModelType) => ({
  //   value: model.external_key,
  //   title: model.name,
  //   ListComponent: () => (
  //     <SelectorOption>
  //       <h3 className='-mt-1 pb-1'>{model.name}</h3>
  //       <p className='opacity-60'>{model.description}</p>
  //     </SelectorOption>
  //   ),
  // }));

  const clipCreated = useContextSelector(
    ClipBrowserRegistryContext,
    (context) => context?.clipCreated || noop
  );

  return !clip ? null : (
    <Modal
      title={'Create Variations'}
      onClose={() => closeModal(ModalTypes.UPSAMPLE_MODEL_SELECT)}
      closeButtonProps={{
        variant: ButtonVariant.Primary,
      }}
      titleClassName='font-sans font-bold text-2xl pt-2'
      contentWrapperClasses='bg-background-primary h-auto'
      wrapperClasses='h-auto'
      className='bg-background-fog-dense'
    >
      <div className='flex flex-col gap-4 pb-8'>
        <span>
          Use the creativity slider to control how much the variation strays
          from your original song.
        </span>
        {/*process.env.NEXT_PUBLIC_NODE_ENV !== 'production' &&
        session.isStaff &&
        session.models.some(
          (model: ModelType) => model.model_subtype === 'U'
        ) ? (
          <div className='flex flex-row items-center gap-4 rounded-[20px] bg-background-fog-thin px-4 py-4'>
            <span className='font-bold'>Model Version</span>
            <div className='flex flex-1 flex-row-reverse'>
              <SelectorV2
                menuClassName={`z-5000000`}
                value={selectedModel}
                onSetValue={(modelKey) => {
                  setSelectedModel(modelKey);
                }}
                variant={ButtonVariant.Standard}
                className={'bg-background-fog-thin'}
                options={upsampleModelOptions as SelectorV2Option[]}
              />
            </div>
          </div>
        ) : null*/}

        <SimpleSlider
          label={'Variation'}
          value={Math.round(freedomParam * 100.0)}
          onChange={(value: number) => {
            setFreedomParam(value / 100.0);
          }}
          labelClassName='font-bold'
        />
        {/* <SimpleSlider
          label={'Strength'}
          value={Math.round(strength * 100.0)}
          onChange={(value: number) => {
            setStrength(value / 100.0);
          }}
          labelClassName='font-bold'
        /> */}
        <SimpleSlider
          label={'Clarity'}
          value={Math.round(clarity * 100.0)}
          onChange={(value: number) => {
            setClarity(value / 100.0);
          }}
          labelClassName='font-bold'
        />

        <SimpleSlider
          label={'Tone'}
          value={Math.round(tone * 100.0)}
          onChange={(value: number) => {
            setTone(value / 100.0);
          }}
          labelClassName='font-bold'
        />

        <SimpleSlider
          label={'Stereo Width'}
          value={Math.round(stereoWidth * 100.0)}
          onChange={(value: number) => {
            setStereoWidth(value / 100.0);
          }}
          labelClassName='font-bold'
        />

        {/*session.isStaff ? (
          <div className='flex flex-row items-center gap-4 rounded-[20px] bg-background-fog-thin px-4 py-8'>
            <span className='pr-12 font-bold'>Style Tags</span>
            <input
              type='text'
              placeholder='Enter style tags'
              onChange={(e: ChangeEvent<HTMLInputElement>) =>
                setStyles(e.target.value)
              }
              className='flex-1 rounded-lg bg-background-fog-thick p-2 outline-none'
              value={styles}
              maxLength={1000}
            />
          </div>
        ) : null*/}
      </div>
      <div className='flex w-full flex-row-reverse gap-2'>
        <Button
          size={ButtonSize.Large}
          variant={ButtonVariant.Primary}
          onClick={async () => {
            const remasteredClips = await clips.upsampleClip(
              clip,
              DEFAULT_VARIATIONS_MODEL,
              {
                freedom: freedomParam,
                tone,
                clarity,
                //strength,
                stereoWidth,
              },
              undefined
              //session.isStaff ? styles : undefined
            );
            eventLogger.logAudioActionEvent(
              false,
              ActionName.upsampleClip,
              clip,
              session,
              pathname
            );
            if (pathname !== '/create') {
              router.push(`/create`);
            }
            toast({
              title: 'Creating variations...',
              status: 'info',
              duration: 10000,
              isClosable: true,
            });
            if (remasteredClips) {
              remasteredClips.forEach(clipCreated);
            }
            closeModal(ModalTypes.UPSAMPLE_MODEL_SELECT);
          }}
        >
          Submit
        </Button>
        <Button
          size={ButtonSize.Large}
          onClick={() => {
            closeModal(ModalTypes.UPSAMPLE_MODEL_SELECT);
          }}
        >
          Cancel
        </Button>
      </div>
    </Modal>
  );
};

export default UpsampleModelSelectModal;