import clsx from 'clsx';
import { useEffect, useMemo } from 'react';

import { useContext } from '@/hooks/useContextSelector';
import { CreateIcon, LibraryIcon } from '@/icons';

import Button, { ButtonSize } from '../button/Button';
import {
  Divider,
  Panel,
  PanelSize,
  VerticalPanelGroup,
} from '../panelSystem/PanelSystem';
import NowPlayingSection from './NowPlayingSection';
import StudioContext from './StudioContext';
import StudioGenerateForm from './StudioGenerateForm';
import StudioLibrary from './StudioLibrary';
import {
  ThickGapHorizontalDivider,
  oneFRPanelSize,
  smallPanelSize,
} from './StudioPanelUtilities';

const nowPlayingPanelSize: PanelSize = {
  unit: 'px',
  count: 115,
};

export default function StudioSidebarPanel() {
  const {
    sidebarPanelSizePx,
    effectiveSidebarSection,
    openAndSetSidebarSection,
    mode,
  } = useContext(StudioContext);

  useEffect(() => {
    if (effectiveSidebarSection === null) {
      openAndSetSidebarSection('create');
    }
  }, [openAndSetSidebarSection]);

  const sidebarPanelSize = useMemo<PanelSize>(() => {
    return {
      unit: 'px',
      count: sidebarPanelSizePx,
    };
  }, [sidebarPanelSizePx]);

  return (
    <Panel
      size={sidebarPanelSize}
      minSizePx={sidebarPanelSizePx <= 50 ? 50 : 350}
      maxSizePx={600}
    >
      <VerticalPanelGroup>
        {sidebarPanelSizePx <= 50 ? null : (
          <>
            <Panel size={smallPanelSize}>
              <div className='grid h-full grid-cols-2 gap-[5px]'>
                <Button
                  size={ButtonSize.Small}
                  className={clsx(
                    'h-full rounded-[10px] bg-background-secondary/65 px-1 py-0 text-foreground-primary',
                    {
                      'bg-opacity-100': effectiveSidebarSection === 'create',
                    }
                  )}
                  icon={<CreateIcon className='h-5 w-5' />}
                  onClick={() => openAndSetSidebarSection('create')}
                >
                  Edit
                </Button>
                <Button
                  size={ButtonSize.Small}
                  className={clsx(
                    'h-full rounded-[10px] bg-background-secondary/65 px-1 py-0 text-foreground-primary',
                    {
                      'bg-opacity-100': effectiveSidebarSection === 'library',
                    }
                  )}
                  icon={<LibraryIcon className='h-5 w-5' />}
                  onClick={() => openAndSetSidebarSection('library')}
                >
                  {mode === 'studio' ? 'Library' : 'My Edits'}
                </Button>
              </div>
            </Panel>
            <Divider influence='neither'>
              <ThickGapHorizontalDivider transparent />
            </Divider>
          </>
        )}
        {sidebarPanelSizePx <= 50 ? null : (
          <>
            {effectiveSidebarSection === 'create' ? (
              <Panel size={oneFRPanelSize}>
                <StudioGenerateForm />
              </Panel>
            ) : effectiveSidebarSection === 'library' ? (
              <>
                <Panel size={oneFRPanelSize}>
                  <StudioLibrary />
                </Panel>
                <Divider influence='neither'>
                  <ThickGapHorizontalDivider transparent />
                </Divider>
                <Panel size={nowPlayingPanelSize}>
                  <NowPlayingSection />
                </Panel>
              </>
            ) : null}
          </>
        )}
      </VerticalPanelGroup>
    </Panel>
  );
}