import styled from '@emotion/styled';
import { ComponentProps, useContext } from 'react';

import useClip from '@/hooks/useClip';

import EditPlaybackContext from './EditPlaybackContext';
import EditTimelineContext from './EditTimelineContext';
import PreviewClipContext from './PreviewClipContext';
import Transport from './Transport';
import { GlassBlock } from './components';
import AlignedLyricsContext from './lyrics/AlignedLyricsContext';

const TimelineAndTransportWrapper = styled.div`
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: 60px 1fr 60px;
`;

const useEditTransportProps = (
  clipId: string
): ComponentProps<typeof Transport> => {
  const { clip } = useClip(clipId);
  const playbackContext = useContext(EditPlaybackContext);
  const { frameCountRef, scrollXRef, resetZoom, zoomAboutSelectionOrCenter } =
    useContext(EditTimelineContext);
  const { songEndSeconds } = useContext(PreviewClipContext);

  return {
    imageUrl: clip?.image_url || undefined,
    clipUrl: `/song/${clipId}`,
    title: clip?.title || undefined,
    artistName: clip?.display_name || undefined,
    getCurrentTime: playbackContext.getCurrentTime,
    songEndSeconds,
    resetZoom,
    zoomAboutSelectionOrCenter,
    scrollXRef,
    frameCountRef,
    volume: playbackContext.volume,
    setVolume: playbackContext.setVolume,
    playing: playbackContext.playing,
    stop: playbackContext.stop,
    play: playbackContext.play,
  };
};

export default function TimelineContainer({
  clipId,
  children,
}: {
  clipId: string;
  children: React.ReactNode;
}) {
  const { isFocused: alignedLyricsFocused } = useContext(AlignedLyricsContext);

  const transportProps = useEditTransportProps(clipId);

  return (
    <GlassBlock focused={!alignedLyricsFocused}>
      <TimelineAndTransportWrapper>
        {children}
        <Transport {...transportProps} />
      </TimelineAndTransportWrapper>
    </GlassBlock>
  );
}