import { createFileRoute } from "@tanstack/react-router";
import { getTree } from "~/fns/browse";
import { useRepo } from "~/hooks/use-repo";
import { FileEditor } from "~/components/FileEditor";
import { requireSignedIn } from "~/lib/route-guards";

export const Route = createFileRoute("/$owner/$repo/new/$")({
  beforeLoad: requireSignedIn,
  loader: ({ params }) => getTree({ data: { owner: params.owner, repo: params.repo, splat: params._splat ?? "" } }),
  component: NewFilePage,
});

function NewFilePage() {
  const tree = Route.useLoaderData();
  const header = useRepo();
  const { owner, repo } = Route.useParams();
  const branch = tree.kind === "tree" ? tree.ref.name : header.repo.defaultBranch;
  const directory = tree.kind === "tree" && tree.path ? `${tree.path}/` : "";
  return (
    <FileEditor
      owner={owner}
      repo={repo}
      branch={branch}
      headSha={tree.kind === "tree" ? tree.ref.sha : null}
      initialPath={directory}
      previousPath={null}
      initialContent=""
      allowDelete={false}
    />
  );
}