import clsx from 'clsx';
import { motion } from 'framer-motion';
import { observer } from 'mobx-react-lite';
import { OverlayContainer } from 'react-aria';
import {
  Button as AriaButton,
  Dialog,
  DialogTrigger,
  OverlayArrow,
  Popover,
} from 'react-aria-components';

import { useStores } from '@/app/(root)/AppProviders';
import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import ModelSelect from '@/components/select/ModelSelect';
import useHasStudioContext from '@/components/studio/useHasStudioContext';
import { useBreakpointMd } from '@/hooks/useBreakpoint';
import { useContextSelector } from '@/hooks/useContextSelector';
import { CloseIcon, GearIcon } from '@/icons';
import logWebUserEvent from '@/logging/logWebUserEvent';
import { CREATE_VERSION, MENUS_Z_INDEX } from '@/utils/constants';

import CreateFormContext from '../v2/CreateFormContext';
import clearRemix from '../v2/actions/clearRemix';
import { CreateModes } from '../v2/types';
import { AnimatedTabs } from './AnimatedTabs';
import { SettingsMenu } from './SettingsMenu';

type Props = {
  lyricsABFlow: any;
};

export const CreateFormTopControls = observer(({ lyricsABFlow }: Props) => {
  const hasStudioContext = useHasStudioContext();
  const createMode = useContextSelector(
    CreateFormContext,
    (ctx) => ctx.state.global.mode
  );
  const setState = useContextSelector(CreateFormContext, (ctx) => ctx.setState);
  const isSettingsMenuOpen = useContextSelector(
    CreateFormContext,
    (ctx) => ctx.isSettingsMenuOpen
  );
  const setIsSettingsMenuOpen = useContextSelector(
    CreateFormContext,
    (ctx) => ctx.setIsSettingsMenuOpen
  );
  const isRemix = useContextSelector(CreateFormContext, (ctx) => ctx.isRemix);
  const { genForm } = useStores();
  const isMobile = !useBreakpointMd();
  return (
    <div className='flex w-full flex-row items-center justify-between p-2'>
      <div className='flex w-[100px] flex-row'>
        <DialogTrigger>
          <AriaButton
            className='outline-none'
            aria-label={
              isSettingsMenuOpen ? 'Close settings menu' : 'Open settings menu'
            }
            onPress={() => {
              if (!isSettingsMenuOpen) {
                //createV2.setAddMenuState('main');
                logWebUserEvent({
                  actionName: 'OpenSettingsMenu',
                  context: {
                    createVersion: CREATE_VERSION,
                  },
                });
              }
              setIsSettingsMenuOpen(!isSettingsMenuOpen);
            }}
          >
            <Button
              icon={GearIcon}
              variant={
                isSettingsMenuOpen
                  ? ButtonVariant.Primary
                  : ButtonVariant.Standard
              }
              shape={ButtonShape.Pill}
              size={ButtonSize.Small}
              className={clsx(
                'relative bg-background-secondary transition-all duration-500 ease-in-out',
                {
                  'rotate-90': isSettingsMenuOpen,
                  'z-10': !isSettingsMenuOpen,
                }
              )}
              enableHoverState
            />
          </AriaButton>
          <OverlayContainer>
            <div
              className={clsx(
                'absolute top-0 left-0 z-1000 h-screen w-screen bg-black/70',
                {
                  'hidden opacity-0': !isSettingsMenuOpen,
                  'block opacity-100': isSettingsMenuOpen,
                }
              )}
            />
            <Popover
              shouldCloseOnInteractOutside={(element: Element) => {
                const isNotModalChild =
                  element.closest('.modal-class') === null;
                const isNotSuppressed =
                  element.closest('.prevent-modal-close') === null;
                return isNotModalChild && isNotSuppressed;
              }}
              placement='top'
              crossOffset={205}
              className='rounded-[30px] outline-none focus:outline-none'
              style={{
                boxShadow: '0px 0px 8px rgba(0,0,0,0.4)',
                zIndex: MENUS_Z_INDEX,
              }}
              isOpen={isSettingsMenuOpen}
              onOpenChange={(isOpen: boolean) => {
                if (!isOpen) {
                  requestAnimationFrame(() => setIsSettingsMenuOpen(false));
                }
              }}
            >
              <OverlayArrow></OverlayArrow>
              <Dialog className='outline-none'>
                <motion.div
                  style={{
                    transformOrigin: 'top left',
                  }}
                  initial={{
                    scale: 0,
                    opacity: 0,
                  }}
                  animate={{
                    scale: 1,
                    opacity: 1,
                  }}
                  transition={{
                    duration: 0.2,
                    ease: 'easeOut',
                  }}
                  className={`flex max-h-[calc(100vh-100px)] w-auto flex-col rounded-[30px] border border-white/10 bg-tertiary`}
                >
                  <SettingsMenu
                    isOpen={isSettingsMenuOpen}
                    onClose={() => setIsSettingsMenuOpen(false)}
                    renderModelSelect={(props: object) => (
                      <ModelSelect state={genForm} {...props} />
                    )}
                    lyricsABFlow={lyricsABFlow}
                  />
                </motion.div>
              </Dialog>
            </Popover>
          </OverlayContainer>
        </DialogTrigger>
      </div>
      {isRemix ? (
        <div className='flex w-full items-center justify-center text-lg text-primary'>
          Remix
        </div>
      ) : (
        <AnimatedTabs
          buttonClassName={clsx('px-1 py-1 w-[50px] text-base')}
          overlayClassName='bg-background-glass-thick'
          className='w-[200px] border-[0.5px] border-background-fog-thin bg-background-secondary p-0 p-[2px]'
          options={
            hasStudioContext
              ? [
                  { value: CreateModes.CUSTOM, title: 'Create' },
                  { value: CreateModes.STUDIO_EDIT, title: 'Edit' },
                  { value: CreateModes.STUDIO_STEM, title: 'Add' },
                ]
              : [
                  { value: CreateModes.SIMPLE, title: 'Simple' },
                  { value: CreateModes.CUSTOM, title: 'Custom' },
                ]
          }
          onChange={(option) => {
            setState((prevState) => ({
              ...prevState,
              mode: option.value as CreateModes,
            }));
          }}
          value={createMode}
          id={'mode-tabs'}
        />
      )}
      <div className='flex items-center justify-center'>
        {isRemix ? (
          <AriaButton
            className='outline-none'
            aria-label='Clear remix'
            onPress={() => {
              setState(clearRemix);
            }}
          >
            <Button
              icon={CloseIcon}
              variant={ButtonVariant.Standard}
              shape={ButtonShape.Pill}
              size={ButtonSize.Small}
              className={clsx(
                'relative ml-2 bg-background-secondary transition-all duration-500 ease-in-out'
              )}
              enableHoverState
            />
          </AriaButton>
        ) : (
          <ModelSelect
            state={genForm}
            logContext={{
              createVersion: CREATE_VERSION,
              source: 'create_header',
            }}
            className='max-w-[100px]'
            wrapperClassName='w-[100px]'
            enableUpsell={!isMobile}
          />
        )}
      </div>
    </div>
  );
});