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

import { useStores } from '@/app/(root)/AppProviders';
import { Option } from '@/app/(root)/create/createV2/componentsQ3/AnimatedTabs';
import { useContextSelector } from '@/hooks/useContextSelector';
import { MusicNoteIcon } from '@/icons';

import Button, { ButtonShape, ButtonVariant } from '../button/Button';
import StudioContext from '../studio/StudioContext';
import {
  activateFollowTrackTiming,
  activateManualTiming,
} from '../studio/actions/setTiming';
import updateTrackName from '../studio/actions/updateTrackName';
import { StudioTrack } from '../studio/types';
import StudioObjectLayout from './StudioObjectLayout';
import StudioObjectTitleRow from './StudioObjectTitleRow';
import StudioTrackInteractionRow from './StudioTrackInteractionRow';
import TrackEQSubsection from './TrackEQSubsection';

export default observer(function StudioTrackLayout({
  studioTrack,
  onCollapse,
  closable = true,
  tabOptions,
  activeTab,
  onTabChange,
}: {
  studioTrack: StudioTrack;
  onCollapse?: () => void;
  closable?: boolean;
  tabOptions?: Option<'clip' | 'track'>[];
  activeTab?: 'clip' | 'track';
  onTabChange?: (option: Option<'clip' | 'track'>) => void;
}) {
  const { session } = useStores();
  const setState = useContextSelector(StudioContext, (ctx) => ctx.setState);
  const setStudioTrackName = useCallback(
    (name: string) => setState(updateTrackName(studioTrack.id, name)),
    [setState, studioTrack.id]
  );

  const tempoTrackId = useContextSelector(StudioContext, (ctx) =>
    ctx.state.timing.type === 'follow-track' ? ctx.state.timing.trackId : null
  );

  const hasStudioEQ = session.flags && Boolean(session.flags['studio-eq']);

  const titleRow = (
    <StudioObjectTitleRow
      title={studioTrack.name}
      setTitle={setStudioTrackName}
    />
  );

  return (
    <StudioObjectLayout
      onCollapse={onCollapse}
      closable={closable}
      tabOptions={tabOptions}
      activeTab={activeTab}
      onTabChange={onTabChange}
      titleRow={titleRow}
    >
      <StudioTrackInteractionRow studioTrack={studioTrack} />
      {tempoTrackId === studioTrack.id ? (
        <Button
          variant={ButtonVariant.Primary}
          shape={ButtonShape.Pill}
          icon={<MusicNoteIcon className='h-4 w-4' />}
          onClick={() => setState(activateManualTiming())}
        >
          Stop Following Tempo
        </Button>
      ) : (
        <Button
          onClick={() => setState(activateFollowTrackTiming(studioTrack.id))}
          variant={ButtonVariant.Secondary}
          shape={ButtonShape.Pill}
          icon={<MusicNoteIcon className='h-4 w-4' />}
        >
          Follow Track Tempo
        </Button>
      )}
      {hasStudioEQ && <TrackEQSubsection track={studioTrack} />}
    </StudioObjectLayout>
  );
});