import clsx from 'clsx';
import { observer } from 'mobx-react-lite';
import { useCallback, useState } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import DevModeInputs from '@/components/section/DevModeInputs';
import LyricsModelSelector from '@/components/select/LyricsModelSelector';
import ModelSelect from '@/components/select/ModelSelect';
import {
  ArrowRightIcon,
  CloseIcon,
  CreateIcon,
  EditIcon,
  SlidersIcon,
} from '@/icons';
import logWebUserEvent from '@/logging/logWebUserEvent';
import { CREATE_VERSION } from '@/utils/constants';
import { isDevOrStaging } from '@/utils/environment';

import { AdvancedSection } from './AdvancedSection';

type Props = {
  onClose: () => void;
  isOpen?: boolean;
  lyricsABFlow: any;
  initialState?: 'main' | 'prompts' | 'personas';
  renderModelSelect?: (props: object) => React.ReactElement;
  onOpenDeletePromptModal?: () => void;
};

export const SettingsMenu = observer(
  ({ onClose, isOpen, renderModelSelect, lyricsABFlow }: Props) => {
    const { genForm, session } = useStores();
    const [mode, setMode] = useState<'main' | 'matrix'>('main');

    const setConfiguration = useCallback(
      (field: string, value: any) => {
        if (value === null) {
          const newConfigurations = { ...genForm.configurations };
          delete newConfigurations[field];
          genForm.configurations = newConfigurations;
        } else {
          genForm.configurations = {
            ...genForm.configurations,
            [field]: value,
          };
        }
      },
      [genForm.configurations]
    );

    return (
      <>
        <div
          className={clsx(
            'flex max-h-[min(100vh,600px)] w-[450px] flex-col overflow-hidden rounded-2xl border border-border-primary bg-background-secondary pt-4 text-foreground-primary transition-[height] duration-500 ease-in-out',
            {
              'h-0': !isOpen,
              'h-auto': isOpen,
            }
          )}
        >
          <>
            <div className='space-between flex flex-row-reverse items-center px-4 pb-[10px]'>
              <div className='h-min'>
                <Button
                  variant={ButtonVariant.Standard}
                  shape={ButtonShape.Pill}
                  size={ButtonSize.Small}
                  icon={CloseIcon}
                  iconClassName='w-4 h-4 rotate-180'
                  onClick={onClose}
                />
              </div>
              <div className='flex-1 text-center font-medium'>
                {mode === 'main' ? 'Settings' : 'The Matrix'}
              </div>
              <Button
                variant={ButtonVariant.Standard}
                shape={ButtonShape.Pill}
                size={ButtonSize.Small}
                icon={ArrowRightIcon}
                className={mode === 'main' ? 'invisible' : undefined}
                iconClassName='w-4 h-4 rotate-180'
                onClick={() => {
                  setMode('main');
                }}
              />
            </div>
            {mode === 'main' ? (
              <>
                <div className='flex flex-col gap-[5px] px-4 pb-4'>
                  <AdvancedSection
                    title={'Model'}
                    icon={CreateIcon}
                    renderRightContent={() =>
                      // <ModelSelect openPosition='top' state={genForm} />
                      renderModelSelect ? (
                        renderModelSelect({
                          openPosition: 'bottom',
                          logContext: {
                            createVersion: CREATE_VERSION,
                            source: 'settings_menu',
                          },
                        })
                      ) : (
                        <ModelSelect openPosition='bottom' state={genForm} />
                      )
                    }
                  />
                  <AdvancedSection
                    title={'Lyrics Model'}
                    icon={EditIcon}
                    renderRightContent={() => (
                      // <ModelSelect openPosition='top' state={genForm} />
                      <LyricsModelSelector
                        className='bg-background-secondary text-sm'
                        menuClassName={`z-[10000] prevent-modal-close`}
                        size={ButtonSize.Small}
                        variant={ButtonVariant.Standard}
                        shape={ButtonShape.Pill}
                        value={genForm.lyricsModel}
                        onSetValue={(newValue: string) => {
                          const previousModel = genForm.lyricsModel;
                          genForm.lyricsModel = newValue;
                          lyricsABFlow.setLyricsModel(newValue);
                          logWebUserEvent({
                            actionName: 'ChangeLyricsModel',
                            context: {
                              modelBefore: previousModel,
                              modelAfter: newValue,
                              source: 'settings_menu',
                              createVersion: CREATE_VERSION,
                            },
                          });
                        }}
                      />
                    )}
                  />
                  {session.flags?.['configs'] &&
                  process.env.NEXT_PUBLIC_ML_DEV_MODE === 'true' &&
                  isDevOrStaging ? (
                    <AdvancedSection
                      title={'The Matrix'}
                      icon={SlidersIcon}
                      onClick={() => setMode('matrix')}
                    />
                  ) : null}
                </div>
              </>
            ) : mode === 'matrix' ? (
              <div className='px-4 pb-8'>
                {session.flags?.['configs'] &&
                process.env.NEXT_PUBLIC_ML_DEV_MODE === 'true' &&
                isDevOrStaging ? (
                  <DevModeInputs
                    state={genForm}
                    setConfiguration={setConfiguration}
                  />
                ) : null}
              </div>
            ) : null}
          </>
        </div>
      </>
    );
  }
);