gitfor/platform

import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { requireSignedIn } from "~/lib/route-guards";
import { useState } from "react";
import { z } from "zod";
import { createRepo, transferableOwners } from "~/fns/repos";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/ui/Button";
import { CheckboxField, SelectField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { PageContainer } from "~/ui/PageContainer";
import { Panel } from "~/ui/Panel";
import { Heading } from "~/ui/Heading";

const VISIBILITY = [
  { value: "public", label: "Public — anyone can see and clone" },
  { value: "private", label: "Private — only you and collaborators" },
] as const;

const MODES = [
  { id: "empty", label: "Start fresh" },
  { id: "import", label: "Import from a URL" },
] as const;

const searchSchema = z.object({ import: z.string().optional(), name: z.string().optional() });

export const Route = createFileRoute("/new")({
  validateSearch: searchSchema,
  beforeLoad: ({ context, location }) => {
    requireSignedIn({ context, location });
  },
  loader: () => transferableOwners(),
  component: NewRepoPage,
});

function NewRepoPage() {
  const owners = Route.useLoaderData();
  const search = Route.useSearch();
  const navigate = useNavigate();
  const action = useAction(createRepo, { invalidate: false });
  const [mode, setMode] = useState<(typeof MODES)[number]["id"]>(search.import ? "import" : "empty");