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

import { Option } from '@/app/(root)/create/createV2/componentsQ3/AnimatedTabs';
import FocusedObjectContextBlocker from '@/app/(root)/create/v2/FocusedObjectContextBlocker';
import { useContextSelector } from '@/hooks/useContextSelector';
import { Clip } from '@/state/clipStore';
import { getClipTitle } from '@/utils/clip';
import { FALLBACK_IMAGE_URL, SMALL_IMAGE } from '@/utils/constants';

import { ClipContextProvider } from '../clipBrowser/ClipContext';
import ImageWithFallback from '../image/ImageWithFallback';
import StudioContext from '../studio/StudioContext';
import updateClipName from '../studio/actions/updateClipName';
import { StudioClip } from '../studio/types';
import DateSubsection from './DateSubsection';
import LyricsSubsection from './LyricsSubsection';
import PromptSubsection from './PromptSubsection';
import RemixSubsection from './RemixSubsection';
import StemsSubsection from './StemsSubsection';
import StudioClipInteractionRow from './StudioClipInteractionRow';
import StudioClipSettingsSubsection from './StudioClipSettingsSubsection';
import StudioObjectLayout from './StudioObjectLayout';
import StudioObjectTitleRow from './StudioObjectTitleRow';

export default observer(function StudioClipLayout({
  studioClip,
  clip,
  onCollapse,
  closable = true,
  tabOptions,
  activeTab,
  onTabChange,
}: {
  studioClip: StudioClip;
  clip: Clip;
  onCollapse?: () => void;
  closable?: boolean;
  tabOptions?: Option<'clip' | 'track'>[];
  activeTab?: 'clip' | 'track';
  onTabChange?: (option: Option<'clip' | 'track'>) => void;
}) {
  const hasStudioContext = useContextSelector(StudioContext, (ctx) => !!ctx);

  const setState = useContextSelector(StudioContext, (ctx) => ctx.setState);
  const setStudioClipName = useCallback(
    (name: string) => setState(updateClipName(studioClip.id, name)),
    [setState, studioClip.id]
  );

  const headerImage = (
    <ImageWithFallback
      imageSize={SMALL_IMAGE}
      className='h-full w-full object-cover'
      src={clip.image_url || FALLBACK_IMAGE_URL}
      alt={`${getClipTitle(clip)} artwork`}
    />
  );

  const titleRow = (
    <StudioObjectTitleRow
      image={headerImage}
      title={studioClip.name}
      setTitle={setStudioClipName}
    />
  );

  const studioClips = useMemo(() => [studioClip], [studioClip]);

  return (
    <ClipContextProvider clip={clip}>
      <StudioObjectLayout
        onCollapse={onCollapse}
        closable={closable}
        border={!hasStudioContext}
        tabOptions={tabOptions}
        activeTab={activeTab}
        onTabChange={onTabChange}
        titleRow={titleRow}
      >
        <StudioClipInteractionRow studioClips={studioClips} />
        <StudioClipSettingsSubsection studioClips={studioClips} />
        <FocusedObjectContextBlocker>
          <StemsSubsection />
        </FocusedObjectContextBlocker>
        <PromptSubsection />
        <RemixSubsection />
        <LyricsSubsection />
        <DateSubsection />
      </StudioObjectLayout>
    </ClipContextProvider>
  );
});