import styled from '@emotion/styled';

import useClip from '@/hooks/useClip';
import { MoreHorizontalIcon } from '@/icons';
import { getClipTitle } from '@/utils/clip';

import Button, { ButtonShape } from '../button/Button';
import {
  ClipContextProvider,
  useClipContext,
  useNullableClipContext,
} from '../clipBrowser/ClipContext';
import { ClipImage } from '../clipBrowser/ClipElements';
import { MoreMenuContents } from '../clipBrowser/ClipMenus';
import { AutoClipPlaybackProvider } from '../clipBrowser/useClipPlayback';
import { ContextMenuTrigger } from '../contextMenu/ContextMenu';
import { Subsection } from './common';

const LineageContent = styled.div`
  display: flex;
  align-items: center;
  justify-content: stretch;
  gap: 12px;
  position: relative;
`;

const LineageText = styled.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  color: var(--color-foreground-tertiary);
  text-align: left;
  flex: 1;
`;

const LineageLabel = styled.div`
  color: white;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
`;

const LineageTitle = styled.a`
  text-align: left;
  color: white;
  font-size: 14px;
  font-weight: 500;
  &:hover {
    text-decoration: underline;
  }
`;

export default function LineageSubsection() {
  const clip = useNullableClipContext();
  if (!clip) return null;
  return (
    <ClipContextProvider clip={clip}>
      <LineageSubsectionContents />
    </ClipContextProvider>
  );
}

function LineageSubsectionContents() {
  const clip = useClipContext();

  const { clip: speedClip, isLoading: speedLoading } = useClip(
    clip.metadata?.speed_clip_id || undefined
  );
  const { clip: coverClip, isLoading: coverLoading } = useClip(
    clip.metadata?.cover_clip_id || undefined
  );
  const { clip: upsampleClip, isLoading: upsampleLoading } = useClip(
    clip.metadata?.upsample_clip_id || undefined
  );
  const { clip: underpaintingClip, isLoading: underpaintingLoading } = useClip(
    clip.metadata?.underpainting_clip_id || undefined
  );
  const { clip: overpaintingClip, isLoading: overpaintingLoading } = useClip(
    clip.metadata?.overpainting_clip_id || undefined
  );
  const { clip: stemClip, isLoading: stemLoading } = useClip(
    clip.metadata?.stem_from_id || undefined
  );

  const isLoading =
    speedLoading ||
    coverLoading ||
    upsampleLoading ||
    underpaintingLoading ||
    overpaintingLoading ||
    stemLoading;

  if (isLoading) return null;

  const lineageItems = [];

  if (clip.metadata?.speed_clip_id && speedClip) {
    lineageItems.push({
      clipId: clip.metadata.speed_clip_id,
      label: 'Adjusted Speed of',
      clip: speedClip,
    });
  }

  if (clip.metadata?.cover_clip_id && coverClip) {
    lineageItems.push({
      clipId: clip.metadata.cover_clip_id,
      label: 'Cover of',
      clip: coverClip,
    });
  }

  if (clip.metadata?.upsample_clip_id && upsampleClip) {
    lineageItems.push({
      clipId: clip.metadata.upsample_clip_id,
      label: 'Remastered from',
      clip: upsampleClip,
    });
  }

  if (clip.metadata?.underpainting_clip_id && underpaintingClip) {
    lineageItems.push({
      clipId: clip.metadata.underpainting_clip_id,
      label: 'Vocals from',
      clip: underpaintingClip,
    });
  }

  if (clip.metadata?.overpainting_clip_id && overpaintingClip) {
    lineageItems.push({
      clipId: clip.metadata.overpainting_clip_id,
      label: 'Instrumental from',
      clip: overpaintingClip,
    });
  }

  if (
    clip.metadata?.stem_from_id &&
    clip.metadata?.task === 'gen_stem' &&
    stemClip
  ) {
    lineageItems.push({
      clipId: clip.metadata.stem_from_id,
      label: 'Stemmed from',
      clip: stemClip,
    });
  }

  if (lineageItems.length === 0) return null;

  return (
    <>
      {lineageItems.map((item, index) => (
        <Subsection key={`${item.clipId}-${index}`}>
          <LineageContent>
            <ClipContextProvider clip={item.clip}>
              <AutoClipPlaybackProvider clip={item.clip}>
                <ClipImage small />
              </AutoClipPlaybackProvider>
            </ClipContextProvider>
            <LineageText>
              <LineageLabel>{item.label}</LineageLabel>
              <div>
                <LineageTitle href={`/song/${item.clipId}`} target='_blank'>
                  {item.clip ? getClipTitle(item.clip) : 'Loading...'}
                </LineageTitle>
              </div>
            </LineageText>
            <ClipContextProvider clip={item.clip}>
              <ContextMenuTrigger
                ButtonComponent={(props) => (
                  <Button
                    className='hover-fade-in context-menu-button p-3'
                    shape={ButtonShape.Pill}
                    icon={<MoreHorizontalIcon className='h-4 w-4' />}
                    {...props}
                  />
                )}
                ContentsComponent={MoreMenuContents}
              />
            </ClipContextProvider>
          </LineageContent>
        </Subsection>
      ))}
    </>
  );
}