import styled from '@emotion/styled';
import { useCallback } from 'react';

import { useContextSelector } from '@/hooks/useContextSelector';
import { CopyIcon, DiscardIcon } from '@/icons';

import Button, { ButtonShape, ButtonVariant } from '../button/Button';
import StudioContext from '../studio/StudioContext';
import deleteTrack from '../studio/actions/deleteTrack';
import duplicateTrack from '../studio/actions/duplicateTrack';
import updateTrack from '../studio/actions/updateTrack';
import { StudioTrack } from '../studio/types';
import ColorPicker from './ColorPicker';

const StudioObjectInteractionRow = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
`;

export default function StudioTrackInteractionRow({
  studioTrack,
}: {
  studioTrack: StudioTrack;
}) {
  const setState = useContextSelector(StudioContext, (ctx) => ctx.setState);

  const setStudioTrackColor = useCallback(
    (color: string) => {
      setState(
        updateTrack(studioTrack.id, (prev: StudioTrack) => ({
          ...prev,
          clips: prev.clips.map((clip) => ({ ...clip, color })),
          color,
          takeLanes: prev.takeLanes.map((takeLane) => ({
            ...takeLane,
            clips: takeLane.clips.map((clip) => ({ ...clip, color })),
          })),
        }))
      );
    },
    [setState, studioTrack.id]
  );
  return (
    <StudioObjectInteractionRow>
      <ColorPicker color={studioTrack.color} setColor={setStudioTrackColor} />
      <Button
        shape={ButtonShape.Pill}
        variant={ButtonVariant.LightGlass}
        className='grow p-1.5'
        icon={<DiscardIcon className='h-5 w-5' />}
        onClick={() => setState(deleteTrack(studioTrack.id))}
      >
        Delete
      </Button>
      <Button
        shape={ButtonShape.Pill}
        variant={ButtonVariant.LightGlass}
        className='grow p-1.5'
        icon={<CopyIcon className='h-5 w-5' />}
        onClick={() => setState(duplicateTrack(studioTrack.id))}
      >
        Duplicate
      </Button>
    </StudioObjectInteractionRow>
  );
}