import styled from '@emotion/styled';
import { observer } from 'mobx-react-lite';

import { useContextSelector } from '@/hooks/useContextSelector';
import { Clip } from '@/state/clipStore';

import { ClipContextProvider } from '../clipBrowser/ClipContext';
import { AutoClipPlaybackProvider } from '../clipBrowser/useClipPlayback';
import StudioContext from '../studio/StudioContext';
import BaseLayout from './BaseLayout';
import BlurryBackgroundClipImage from './BlurryClipImage';
import ClipInteractionRow from './ClipInteractionRow';
import ClipTitleCaptionRow from './ClipTitleCaptionRow';
import LineageSubsection from './LineageSubsection';
import MainClipImage from './MainClipImage';
import PromptSubsection from './PromptSubsection';
import RemixEditSubsection from './RemixEditSubsection';
import RemixSubsection from './RemixSubsection';
import StemsSubsection from './StemsSubsection';
import UserRow from './UserRow';

const LyricsDisplay = styled.div`
  font-size: 14px;
  color: var(--color-foreground-primary);
  text-align: left;
  white-space: pre-wrap;
`;

export default observer(function ClipLayout({
  clip,
  onCollapse,
  closable = true,
}: {
  clip: Clip;
  onCollapse?: () => void;
  closable?: boolean;
}) {
  const hasStudioContext = useContextSelector(StudioContext, (ctx) => !!ctx);

  return (
    <ClipContextProvider clip={clip}>
      <BaseLayout
        onCollapse={onCollapse}
        closable={closable}
        backgroundImage={<BlurryBackgroundClipImage />}
        tightMargin={hasStudioContext}
        border={!hasStudioContext}
      >
        <MainClipImage />
        <AutoClipPlaybackProvider clip={clip}>
          <ClipInteractionRow />
        </AutoClipPlaybackProvider>
        <UserRow />
        <ClipTitleCaptionRow />
        <RemixEditSubsection />
        {hasStudioContext && <StemsSubsection />}
        <PromptSubsection />
        <RemixSubsection />
        <LineageSubsection />
        <LyricsDisplay>{clip.metadata.prompt}</LyricsDisplay>
      </BaseLayout>
    </ClipContextProvider>
  );
});