import classNames from "classnames";
import { useAtomValue } from "jotai";
import { memo } from "react";
import { DropMarker } from "../DropMarker";
import { hoveredParentDepthFamily, isIndexHoveredFamily } from "./atoms";
import type { TreeNode } from "./common";
import { useIsCollapsed } from "./context";

export const TreeDropMarker = memo(function TreeDropMarker<T extends { id: string }>({
  className,
  treeId,
  node,
  index,
}: {
  treeId: string;
  index: number;
  node: TreeNode<T> | null;
  className?: string;
}) {
  const isHovered = useAtomValue(isIndexHoveredFamily({ treeId, index }));
  const parentDepth = useAtomValue(hoveredParentDepthFamily(treeId));
  const collapsed = useIsCollapsed(node?.item.id);

  // Only show if we're hovering over this index
  if (!isHovered) return null;

  // Don't show if we're right under a collapsed folder, or empty folder. We have a separate
  // delayed expansion animation for that.
  if (collapsed || node?.children?.length === 0) return null;

  return (
    <div className="drop-marker relative" style={{ paddingLeft: `${parentDepth}rem` }}>
      <DropMarker className={classNames(className)} />
    </div>
  );
});