type ChildrenProps = {
  node: Node;
};

export function Children({ node }: ChildrenProps) {
  return node.children.map((c) => (
    <Item key={c.path + "/" + c.name} node={c} />
  ));
}

type ItemProps = ChildrenProps & {
  node: Child;
};

function Item({ node }: ItemProps) {
  const [open, setOpen] = useState(false);
  const path = node.path;
  const uri = monaco.Uri.parse(
    `file:///${path.startsWith("/") ? path.slice(1) : path}`
  ).toString();

   const {
    setSelectedDir,
    setSelectedFile,
    selectedFile,
    selectedDir
  } = useItemStore()

  const isSelected = selectedFile ? selectedFile === uri : selectedDir === path;
  return (
    <>
      <div
        key={node.path}
        onClick={() => {
          if (node.isDir) {
            console.log("toggling open ", path, open);
            setOpen((o) => !o);
            setSelectedDir(path);
          } else {
            const childUri = monaco.Uri.parse(
              `file:///${path.startsWith("/") ? path.slice(1) : path}`
            ).toString();
            setSelectedFile(childUri);
          }
        }}
        className={cn(
          `flex items-center transition-all ease-out`,
          `hover:cursor-pointer hover:bg-gray-900`
        )}
        style={{ paddingLeft: `${node.depth * 16}px` }}
      >
        <span className="flex w-[32px] h-[32px] items-center justify-center">
          {getIcon(node.name.split(".").pop() || "", node.name, {
            isDir: node.isDir,
            open,
          })}
        </span>

        <span style={{ marginLeft: 1, marginBottom: 3 }}>{node.name}</span>
      </div>

      {open && node.isDir && <Nested node={node} />}
    </>
  );
}

function Nested({ node: dir }: ItemProps) {
  const { data, isLoading } = useWSQuery(["GENERATE_TREE", dir.path]);

  const useFullData = useMemo(() => {
    if (data) {
      const cloned = { ...data };

      cloned.children.forEach((c) => {
        c.depth = (dir.depth !== undefined ? dir.depth : 0) + 1;
      });

      return cloned;
    }
  }, [data, dir]);

  if (isLoading) {
    // Maybe query is still loading..
    return null;
  }

  if (!data || !useFullData) {
    return <p>error fetching contents for {dir.path}</p>;
  }

  return <Children key={dir.path + Math.random()} node={useFullData} />;
}