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

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

import { StudioClip } from '../studio/types';
import StudioClipSettingsSubsection from './StudioClipSettingsSubsection';
import StudioObjectLayout from './StudioObjectLayout';
import StudioObjectTitleRow from './StudioObjectTitleRow';

export default observer(function MultiStudioClipLayout({
  studioClips,
  onCollapse,
  closable = true,
  tabOptions,
  activeTab,
  onTabChange,
}: {
  studioClips: StudioClip[];
  onCollapse?: () => void;
  closable?: boolean;
  tabOptions?: Option<'clip' | 'track'>[];
  activeTab?: 'clip' | 'track';
  onTabChange?: (option: Option<'clip' | 'track'>) => void;
}) {
  const headerImage = (
    <div className='flex h-full w-full items-center justify-center'>
      <MusicNoteIcon />
    </div>
  );

  const titleRow = (
    <StudioObjectTitleRow
      image={headerImage}
      title={`Selection (${studioClips.length} clip${
        studioClips.length === 1 ? '' : 's'
      })`}
    />
  );

  return (
    <StudioObjectLayout
      onCollapse={onCollapse}
      closable={closable}
      tabOptions={tabOptions}
      activeTab={activeTab}
      onTabChange={onTabChange}
      titleRow={titleRow}
    >
      <StudioClipSettingsSubsection studioClips={studioClips} keepOpen />
    </StudioObjectLayout>
  );
});