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

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

import { WorkspaceClipPin } from './WorkspaceClipPin';
import { ClipBrowserContext } from './useClipBrowser';

const PinnedClipsWrapper = styled.div`
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-left: 16px;
  column-gap: 8px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  min-height: 76px;
`;

const PinnedClipWrapper = styled.div`
  min-width: 320px;
  max-width: 320px;
  flex-grow: 1;
  height: auto;
`;

export default function WorkspacePinnedClips() {
  const workspacePinnedClips = useContextSelector(
    ClipBrowserContext,
    (context) => context.workspacePinnedClips
  );

  const handleWheel = useCallback((e: React.WheelEvent<HTMLDivElement>) => {
    e.currentTarget.scrollLeft += e.deltaX + e.deltaY;
    e.stopPropagation();
    e.preventDefault();
  }, []);

  return (
    <PinnedClipsWrapper onWheel={handleWheel}>
      {workspacePinnedClips.map((clip: Clip) => (
        <PinnedClipWrapper key={clip.id}>
          <WorkspaceClipPin clipId={clip.id} />
        </PinnedClipWrapper>
      ))}
    </PinnedClipsWrapper>
  );
}