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

import DragAndDropContext from '@/app/(root)/dragAndDrop/DragAndDropContext';
import Droppable from '@/app/(root)/dragAndDrop/Droppable';
import { useContextSelector } from '@/hooks/useContextSelector';
import RemixIcon from '@/icons/generated/RemixIcon';

const SpacerAnimation = keyframes`
  from {
    height: 0px;
  }
  to {
    height: 157px;
  }
`;

const Spacer = styled.div`
  animation: ${SpacerAnimation} 0.2s ease-in-out both;
`;

const BorderlessOverlay = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
`;

const RemixDropOverlay = styled.div<{ isDraggedOver: boolean }>`
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border: 2px dashed
    ${({ isDraggedOver }) =>
      isDraggedOver
        ? 'rgb(var(--rgb-strawberry-600))'
        : 'var(--color-foreground-inactive)'};
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.28px;
  color: ${({ isDraggedOver }) =>
    isDraggedOver
      ? 'rgb(var(--rgb-strawberry-600))'
      : 'var(--color-foreground-inactive)'};
  text-align: center;
  padding: 20px;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
`;

export default function CreateFormDropzone(
  props: Pick<
    ComponentProps<typeof Droppable>,
    'accept' | 'onDrop' | 'onDragMove' | 'onDragLeave'
  >
) {
  const { onDragMove, onDragLeave, ...droppableProps } = props;
  const [isDraggedOver, setIsDraggedOver] = useState(false);

  const hasValidDraggableObject = useContextSelector(
    DragAndDropContext,
    (ctx) =>
      ctx.draggedObject?.type === 'clip' ||
      ctx.draggedObject?.type === 'studio-timeline'
  );

  if (!hasValidDraggableObject) {
    return null;
  }

  const handleDragMove = (
    draggedObject: any,
    event: React.MouseEvent<HTMLDivElement>
  ) => {
    setIsDraggedOver(true);
    onDragMove?.(draggedObject, event);
  };

  const handleDragLeave = (
    draggedObject: any,
    event: React.MouseEvent<HTMLDivElement>
  ) => {
    setIsDraggedOver(false);
    onDragLeave?.(draggedObject, event);
  };

  return (
    <Droppable
      {...droppableProps}
      onDragMove={handleDragMove}
      onDragLeave={handleDragLeave}
      overlay={
        <BorderlessOverlay>
          <RemixDropOverlay isDraggedOver={isDraggedOver}>
            <RemixIcon
              style={{
                width: 24,
                height: 24,
                color: 'inherit',
              }}
            />
            Drop here to remix
          </RemixDropOverlay>
        </BorderlessOverlay>
      }
    >
      <Spacer />
    </Droppable>
  );
}