import { keyframes } from '@emotion/react';
import styled from '@emotion/styled';
import { useCallback, useEffect, useState } from 'react';

import { useContextSelector } from '@/hooks/useContextSelector';
import { CaretDownIcon, CaretUpIcon, CloseIcon } from '@/icons';
import { Clip } from '@/state/clipStore';

import Button, { ButtonShape, ButtonVariant } from '../button/Button';
import useClipMatchesFilters from './clipMatchesFilters';
import { ClipBrowserContext } from './useClipBrowser';
import { ClipBrowserRegistryContext } from './useClipBrowserRegistry';

const slideDown = keyframes`
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0px);
  }
`;

const Drawer = styled.div`
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 50%;
  width: 100%;
  max-width: 600px;
  transform: translateX(-50%) translateY(0px);
  background-color: var(--color-background-secondary);
  border-radius: 26px;
  border: 1px solid var(--color-border-primary);

  animation: ${slideDown} 0.3s ease-in-out;
`;

const Header = styled.div`
  padding: 8px;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
`;

const ListWrapper = styled.div`
  max-height: 300px;
  overflow-y: auto;
`;

export default function JustCreatedClips({
  ListComponent,
}: {
  ListComponent: React.ComponentType<{ clipId: string }>;
}) {
  const [justCreatedClips, setJustCreatedClips] = useState<Clip[]>([]);
  const registerClipChangeListener = useContextSelector(
    ClipBrowserRegistryContext,
    (c) => c.registerClipChangeListener
  );

  const filters = useContextSelector(
    ClipBrowserContext,
    (context) => context.filters
  );

  const clipMatchesFilters = useClipMatchesFilters();

  useEffect(() => {
    setJustCreatedClips((prev) =>
      prev.filter((clip) => !clipMatchesFilters(clip, filters))
    );
    return registerClipChangeListener((clip, justCreated) => {
      if (justCreated && !clipMatchesFilters(clip, filters)) {
        setJustCreatedClips((prev) => [...prev, clip]);
      }
    });
  }, [registerClipChangeListener, filters, clipMatchesFilters]);

  const dismiss = useCallback(() => {
    setJustCreatedClips([]);
  }, []);

  const [collapsed, setCollapsed] = useState(true);

  if (justCreatedClips.length === 0) {
    return null;
  }

  return (
    <Drawer>
      <Header>
        <Button
          shape={ButtonShape.Pill}
          variant={ButtonVariant.Tertiary}
          icon={collapsed ? <CaretDownIcon /> : <CaretUpIcon />}
          onClick={() => setCollapsed(!collapsed)}
          className='text-sm text-foreground-tertiary hover:text-foreground-primary'
        >
          {justCreatedClips.length} new clip
          {justCreatedClips.length > 1 ? 's' : ''} hidden by current filters
        </Button>
        <Button
          shape={ButtonShape.Pill}
          icon={<CloseIcon />}
          onClick={dismiss}
        />
      </Header>
      {!collapsed && (
        <ListWrapper>
          {justCreatedClips.map((clip) => (
            <ListComponent key={clip.id} clipId={clip.id} />
          ))}
        </ListWrapper>
      )}
    </Drawer>
  );
}