import { useApp } from "@/context/app";
import { ServerRequest } from "@/lib/actions";
import { ProjectFilesTree } from "@/models/projectFilesTree";
import fetchSubdomainFiles from "@/services/files/fetchSubdomainFiles";
import { useParams } from "next/navigation";
import { useEffect, useState } from "react";
import { toast } from "sonner";

type ContentStatus = "loading" | "loaded" | "error";

function findItemByPath(
  items: ProjectFilesTree[],
  path: string,
): ProjectFilesTree[] | undefined {
  for (const item of items) {
    if (item.path === path) return item.children;

    if (item.children) {
      const foundItem = findItemByPath(item.children, path);
      if (foundItem) return foundItem;
    }
  }

  return undefined;
}

export function useContent() {
  const { signal } = useApp();

  const params = useParams();

  const [tree, setTree] = useState<ProjectFilesTree>();
  const [treeState, setTreeState] = useState<ProjectFilesTree[]>();
  const [path, setPath] = useState<string>();
  const [contentStatus, setContentStatus] = useState<ContentStatus>("loading");

  useEffect(() => {
    if (!tree) return;

    document
      .querySelectorAll("tr.clicked")
      .forEach((el) => el.classList.remove("clicked"));

    if (!path) {
      return setTreeState(tree.children);
    }

    const selectedItem = findItemByPath(
      tree.children as ProjectFilesTree[],
      path,
    );

    if (!selectedItem) return setTreeState(tree.children);

    setTreeState(selectedItem);

    return () => {
      setTreeState(undefined);
    };
  }, [path, tree]);

  useEffect(() => {
    const loadContent = async () => {
      const formData = new FormData();
      formData.append("name", params.name as string);

      const result = await ServerRequest<ProjectFilesTree>(
        fetchSubdomainFiles(formData),
      );

      if (!result.operation) {
        setContentStatus("error");
        return toast.error(result.message);
      }

      setContentStatus("loaded");
      setTree(result.data);
      if (!path) setPath(result.data.path);
    };

    loadContent();

    return () => {
      setContentStatus("loading");
      setTree(undefined);
    };
  }, [signal]);

  return {
    path,
    tree,
    treeState,
    contentStatus,
    setPath,
    setTreeState,
  };
}