import { createFileRoute, redirect } from "@tanstack/react-router";
import { getTree } from "~/fns/browse";
import { useRepo } from "~/hooks/use-repo";
import { TreeView } from "~/components/TreeView";
import { EmptyRepo } from "~/components/EmptyRepo";
import { BranchPushSuggestions } from "~/components/BranchPushSuggestions";

export const Route = createFileRoute("/$owner/$repo/tree/$")({
  loader: async ({ params }) => {
    const tree = await getTree({ data: { owner: params.owner, repo: params.repo, splat: params._splat ?? "" } });
    if (tree.kind === "file") {
      throw redirect({
        to: "/$owner/$repo/blob/$",
        params: { owner: params.owner, repo: params.repo, _splat: params._splat ?? "" },
      });
    }
    return tree;
  },
  component: TreePage,
});

function TreePage() {
  const tree = Route.useLoaderData();
  const header = useRepo();
  const { owner, repo } = Route.useParams();
  if (tree.kind === "empty") return <EmptyRepo cloneUrl={header.cloneUrl} defaultBranch={header.repo.defaultBranch} />;
  if (tree.kind !== "tree") return null;
  return (
    <div className="space-y-4">
      <BranchPushSuggestions owner={owner} repo={repo} defaultBranch={header.repo.defaultBranch} />
      <TreeView
        owner={owner}
        repo={repo}
        gitRef={tree.ref}
        path={tree.path}
        entries={tree.entries}
        commit={tree.commit}
        commitStatus={tree.commitStatus}
        commitRun={tree.commitRun}
        readme={tree.readme}
        branches={tree.branches}
        tags={tree.tags}
        canWrite={header.permission === "write" || header.permission === "admin"}
        containersAllowed={header.containersAllowed}
      />
    </div>
  );
}