import styled from '@emotion/styled';

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

import Button, { ButtonShape } from '../button/Button';
import {
  ClipContextProvider,
  NullableClipContextProvider,
  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 RemixContent = styled.div`
  display: flex;
  align-items: center;
  justify-content: stretch;
  gap: 12px;
  position: relative;
`;

const RemixText = 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 RemixOf = styled.div`
  color: white;
  text-align: left;
`;

const RemixSongTitle = styled.a`
  text-align: left;
  &:hover {
    text-decoration: underline;
  }
`;

const RemixUserHandle = styled.a`
  color: white;
  text-align: left;
  &:hover {
    text-decoration: underline;
  }
`;

export default function RemixSubsection() {
  const clip = useNullableClipContext();
  if (!clip || !clip.metadata?.show_remix) return null;
  return (
    <ClipContextProvider clip={clip}>
      <RemixSubsectionContents />
    </ClipContextProvider>
  );
}

function RemixSubsectionContents() {
  const clip = useClipContext();
  const { parentClip: partialParentClip } = useParentClip({ clipId: clip.id });
  const { clip: parentClip } = useClip(partialParentClip?.id ?? undefined);
  if (!parentClip) return null;
  return (
    <Subsection>
      <NullableClipContextProvider clip={parentClip}>
        <AutoClipPlaybackProvider clip={parentClip}>
          <RemixContent>
            <ClipImage small />
            <RemixText>
              <RemixOf>Remix of</RemixOf>
              <div>
                <RemixSongTitle
                  href={`/song/${parentClip?.id}`}
                  target='_blank'
                >
                  {getClipTitle(parentClip)}
                </RemixSongTitle>{' '}
                by{' '}
                <RemixUserHandle
                  href={`/user/@${parentClip?.handle}`}
                  target='_blank'
                >
                  {parentClip?.display_name}
                </RemixUserHandle>
              </div>
            </RemixText>
            <ClipContextProvider clip={parentClip}>
              <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>
          </RemixContent>
        </AutoClipPlaybackProvider>
      </NullableClipContextProvider>
    </Subsection>
  );
}