import React from "react";
import rbd from "react-beautiful-dnd";
import SvgIcon from "../Svg/Icon";
import { getActiveClasses } from "../utility/active-classes";
import { Dropzones } from "./types";
import EightDotsSvg from "./assets/eight-dots.svg";

export default function DragAndDropGripper({
  snapshot,
  provided,
  isDraggingAny
}: {
  snapshot: rbd.DraggableStateSnapshot;
  provided: rbd.DraggableProvided;
  isDraggingAny: boolean;
}) {
  return (
    <div
      className={getActiveClasses([
        "auik-flex auik-items-center auik-opacity-0 hocus:auik-opacity-100 auik-flex auik-absolute auik-left-0 auik-bottom-0 auik-top-0 auik-z-20 auik-bg-blue-400 auik-transition-250 auik-transition-opacity auik-transition-ease",
        {
          "hocus:auik-opacity-0": !snapshot.isDragging && isDraggingAny,
          "auik-opacity-100": snapshot.isDragging,
          "auik-bg-red-400":
            snapshot.draggingOver === Dropzones.UNPINNED_DROP_ZONE,
          "hocus:auik-bg-blue-400": !isDraggingAny
        }
      ])}
      style={{ padding: "0px 1px" }}
      {...provided.dragHandleProps}
    >
      <EightDotsSvg />
    </div>
  );
}