import * as React from "react";
import { useCallback } from "react";
import { DraggingPosition, TreeItem } from "../types";
import { useTreeEnvironment } from "./ControlledTreeEnvironment";
import { useStableHandler } from "../use-stable-handler";

export const useOnDragEnterTreeItemHandler = (
  setDragCode: (value: string) => boolean,
  draggingItems: TreeItem[] | undefined,
  itemHeight: number,
  onDragAtPosition: (draggingPosition: DraggingPosition | undefined, target?: HTMLElement) => void,
  onPerformDrag: (draggingPosition: DraggingPosition, target?: HTMLElement) => void,
  treeId: string | undefined,
  incrementDragCount: (decremement?: boolean) => void
) => {
  const { canDropOnFolder, canDropOnNonFolder, canDragAndDrop, linearItems, items, trees } = useTreeEnvironment();

  return useStableHandler((e: React.DragEvent<HTMLElement>) => {
    if (e.dataTransfer.types.includes("Files")) {
      return;
    }

    e.preventDefault();
    e.stopPropagation();
    incrementDragCount();
    if (!treeId || !draggingItems || !canDragAndDrop) {
      return;
    }

    if (linearItems[treeId].length === 0) {
      // Empty tree
      onPerformDrag({
        targetType: "root",
        treeId,
        targetItem: trees[treeId].rootItem,
      });
      return;
    }

    const dataset = e.currentTarget.dataset;
    const itemId =
      dataset.rctIsFolder === "true"
        ? dataset.rctItemId
        : dataset.rctIsFolder === "false"
        ? dataset.rctParentId
        : undefined;

    if (!itemId) {
      setDragCode("outside");
      onDragAtPosition(undefined);
      return;
    }

    const nextDragCode = `${treeId}${itemId}`;

    const isDragCodeChanged = setDragCode(nextDragCode);
    if (!isDragCodeChanged) {
      return;
    }

    const targetItemData = items[itemId];

    if (!canDropOnNonFolder && !targetItemData.isFolder) {
      onDragAtPosition(undefined);
      return;
    }

    if (!canDropOnFolder && targetItemData.isFolder) {
      onDragAtPosition(undefined);
      return;
    }

    if (draggingItems.some((draggingItem) => draggingItem.index === targetItemData.index)) {
      onDragAtPosition(undefined);
      return;
    }

    onPerformDrag(
      {
        targetType: "item",
        treeId,
        targetItem: itemId,
      },
      e.currentTarget
    );
  });
};

export const useOnDragLeaveTreeHandler = (incrementDragCount: (decremement?: boolean) => void) =>
  useCallback(
    (_e: React.DragEvent<HTMLElement>) => {
      incrementDragCount(true);
    },
    [incrementDragCount]
  );