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

import { Option } from '@/app/(root)/create/createV2/componentsQ3/AnimatedTabs';
import { FocusedObjectContext } from '@/app/(root)/create/v2/useFocusedObject';
import useClip from '@/hooks/useClip';
import { useContextSelector } from '@/hooks/useContextSelector';
import { SlidersIcon, WaveformIcon } from '@/icons';

import StudioContext from '../studio/StudioContext';
import {
  getFocusedStudioClip,
  getFocusedTrack,
  getSelectedClips,
  getSelectionDurationBeats,
} from '../studio/selectors';
import { StudioClip } from '../studio/types';
import MultiStudioClipLayout from './MultiStudioClipLayout';
import StudioClipLayout from './StudioClipLayout';
import StudioObjectLayout from './StudioObjectLayout';
import StudioTrackLayout from './StudioTrackLayout';

const EMPTY_ARRAY: StudioClip[] = [];

export default observer(function StudioPanelLayout({
  onCollapse,
  closable = true,
}: {
  onCollapse?: () => void;
  closable?: boolean;
}) {
  const studioPanelMode = useContextSelector(
    FocusedObjectContext,
    (ctx) => ctx.studioPanelMode
  );

  const setStudioPanelMode = useContextSelector(
    FocusedObjectContext,
    (ctx) => ctx.setStudioPanelMode
  );

  // Get studio selections from studio state
  const studioFocusedClip = useContextSelector(StudioContext, (ctx) =>
    ctx ? getFocusedStudioClip(ctx.state) : null
  );

  const studioFocusedTrack = useContextSelector(StudioContext, (ctx) =>
    ctx ? getFocusedTrack(ctx.state) : null
  );

  const studioSelectedClips = useContextSelector(StudioContext, (ctx) =>
    ctx ? getSelectedClips(ctx.state) : EMPTY_ARRAY
  );

  const studioSelectionDurationBeats = useContextSelector(
    StudioContext,
    (ctx) => (ctx ? getSelectionDurationBeats(ctx.state) : 0)
  );

  // Get the clip data for the focused studio clip
  const { clip: focusedStudioClipData } = useClip(
    studioFocusedClip?.clipId || undefined
  );

  // Create tab options for studio context
  const tabOptions: Option<'clip' | 'track'>[] = useMemo(
    () => [
      {
        value: 'clip',
        label: (
          <>
            <WaveformIcon className='h-4 w-4' />
            Clip
          </>
        ),
      },
      {
        value: 'track',
        label: (
          <>
            <SlidersIcon className='h-4 w-4' />
            Track
          </>
        ),
      },
    ],
    []
  );

  const handleTabChange = useCallback(
    (option: Option<'clip' | 'track'>) => {
      setStudioPanelMode(option.value);
    },
    [setStudioPanelMode]
  );

  // Determine what to show based on panel mode and studio selections
  if (studioPanelMode === 'clip') {
    // Show single studio clip
    if (
      studioFocusedClip &&
      focusedStudioClipData &&
      studioSelectedClips.length === 1
    ) {
      return (
        <StudioClipLayout
          clip={focusedStudioClipData}
          studioClip={studioFocusedClip}
          onCollapse={onCollapse}
          closable={closable}
          tabOptions={tabOptions}
          activeTab={studioPanelMode}
          onTabChange={handleTabChange}
        />
      );
    }
    // Show multiple studio clips
    if (studioSelectedClips.length > 0 && studioSelectionDurationBeats > 0) {
      return (
        <MultiStudioClipLayout
          studioClips={studioSelectedClips}
          onCollapse={onCollapse}
          closable={closable}
          tabOptions={tabOptions}
          activeTab={studioPanelMode}
          onTabChange={handleTabChange}
        />
      );
    }
    // Empty clip view
    return (
      <StudioObjectLayout
        onCollapse={onCollapse}
        closable={closable}
        tabOptions={tabOptions}
        activeTab={studioPanelMode}
        onTabChange={handleTabChange}
      >
        <div className='flex h-full items-center justify-center px-4 text-center text-foreground-inactive'>
          Select a clip to view its details.
        </div>
      </StudioObjectLayout>
    );
  } else if (studioPanelMode === 'track') {
    // Show track
    if (studioFocusedTrack) {
      return (
        <StudioTrackLayout
          studioTrack={studioFocusedTrack}
          onCollapse={onCollapse}
          closable={closable}
          tabOptions={tabOptions}
          activeTab={studioPanelMode}
          onTabChange={handleTabChange}
        />
      );
    }
    // Empty track view
    return (
      <StudioObjectLayout
        onCollapse={onCollapse}
        closable={closable}
        tabOptions={tabOptions}
        activeTab={studioPanelMode}
        onTabChange={handleTabChange}
      >
        <div className='flex h-full items-center justify-center px-4 text-center text-foreground-inactive'>
          Select a track to view its details.
        </div>
      </StudioObjectLayout>
    );
  }

  return null;
});