import { useCallback, useState } from 'react';

import { useContextSelector } from '@/hooks/useContextSelector';
import { CaretRightIcon, CaretUpIcon } from '@/icons';

import Button, { ButtonShape, ButtonVariant } from '../../button/Button';
import StudioContext from '../../studio/StudioContext';
import updateTrack from '../../studio/actions/updateTrack';
import { StudioTrack } from '../../studio/types';
import { Subsection } from '../common';
import BandKnobs from './BandKnobs';
import BandSelector from './BandSelector';
import { EQStateProvider } from './EQStateContext';
import EQVisualization from './EQVisualization';
import EffectBackground from './EffectBackground';
import PresetSelector from './PresetSelector';
import ToggleSwitch from './ToggleSwitch';
import TypeSelector from './TypeSelector';
import { useEQStateManagement } from './useEQStateManagement';

// Component to show the knobs and type selector for selected band
function SelectedEQKnobs() {
  return (
    <div className='flex flex-col gap-2 bg-background-glass-thin p-2'>
      <BandSelector />
      <TypeSelector />
      <BandKnobs />
    </div>
  );
}

function TrackEQSubsectionContent({ track }: { track: StudioTrack }) {
  const [expanded, setExpanded] = useState(true);
  const setState = useContextSelector(StudioContext, (ctx) => ctx?.setState);

  const toggleEQ = useCallback(() => {
    if (!setState) return;

    setState(
      updateTrack(track.id, (t) => ({
        ...t,
        eq: {
          ...t.eq,
          enabled: !t.eq.enabled,
        },
      }))
    );
  }, [track.id, setState]);

  return (
    <Subsection
      className='relative flex flex-col gap-2'
      style={{ fontSize: 14, paddingBottom: 8, paddingTop: 8 }}
    >
      <EffectBackground enabled={track.eq.enabled} />
      {/* Header row with expand/collapse and on/off toggle */}
      <div className='flex h-8 flex-row items-center justify-between gap-2'>
        <Button
          onClick={() => setExpanded(!expanded)}
          variant={ButtonVariant.Tertiary}
          shape={ButtonShape.Pill}
          icon={
            expanded ? (
              <CaretUpIcon className='h-6 w-6' />
            ) : (
              <CaretRightIcon className='h-6 w-6' />
            )
          }
          className='-ml-2 gap-1 p-1 pr-2 text-sm'
        >
          EQ
        </Button>
        <ToggleSwitch enabled={track.eq.enabled} onClick={toggleEQ} />
      </div>

      {expanded && (
        <>
          <PresetSelector track={track} />

          {/* EQ Visualization */}
          <div className='-mx-2 overflow-hidden rounded-xl'>
            <EQVisualization track={track} />
          </div>

          {/* Selected Band/Filter section */}
          <div className='-mx-2 overflow-hidden rounded-xl'>
            <SelectedEQKnobs />
          </div>
        </>
      )}
    </Subsection>
  );
}

export default function TrackEQSubsection({ track }: { track: StudioTrack }) {
  const eqStateManagement = useEQStateManagement(track);

  return (
    <EQStateProvider value={eqStateManagement}>
      <TrackEQSubsectionContent track={track} />
    </EQStateProvider>
  );
}