import { forwardRef } from "react";
import { useTreeApi } from "../context";
import { Cursor } from "./cursor";

export const ListOuterElement = forwardRef(function Outer(
  props: React.HTMLProps<HTMLDivElement>,
  ref,
) {
  const { children, ...rest } = props;
  const tree = useTreeApi();
  return (
    <div
      // @ts-ignore
      ref={ref}
      {...rest}
      onClick={(e) => {
        if (tree.props.disableDeselectOnClick) return;
        if (e.currentTarget === e.target) tree.deselectAll();
      }}
    >
      <DropContainer />
      {children}
    </div>
  );
});

export const DropContainer = () => {
  const tree = useTreeApi();
  return (
    <div
      style={{
        height: tree.rowTopPosition(tree.visibleNodes.length),
        width: "100%",
        position: "absolute",
        left: "0",
        right: "0",
      }}
    >
      <Cursor />
    </div>
  );
};