import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { useState } from "react";
import { createRelease } from "~/fns/releases";
import { useAction } from "~/hooks/use-action";
import { useRepo } from "~/hooks/use-repo";
import { MarkdownEditor } from "~/components/MarkdownEditor";
import { Panel } from "~/ui/Panel";
import { Button } from "~/ui/Button";
import { CheckboxField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { requireSignedIn } from "~/lib/route-guards";

export const Route = createFileRoute("/$owner/$repo/releases/new")({
  beforeLoad: requireSignedIn,
  component: NewReleasePage,
});

function NewReleasePage() {
  const params = Route.useParams();
  const header = useRepo();
  const navigate = useNavigate();
  const [body, setBody] = useState("");
  const create = useAction(createRelease, { invalidate: false });

  return (
    <Panel title="New release" className="max-w-3xl">
      <form
        className="space-y-4 p-5"
        onSubmit={async (event) => {
          event.preventDefault();
          const form = new FormData(event.currentTarget);
          const submitter = event.nativeEvent.submitter;
          const draft = submitter instanceof HTMLButtonElement && submitter.value === "draft";
          const result = await create.run({
            data: {
              ...params,
              tag: String(form.get("tag") ?? ""),
              target: String(form.get("target") ?? header.repo.defaultBranch),
              name: String(form.get("name") ?? ""),
              body,
              draft,
              prerelease: form.get("prerelease") === "on",
            },
          });
          if (result) await navigate({ to: "/$owner/$repo/releases", params, search: { tag: result.tag } });
        }}
      >
        <ErrorBanner message={create.error} />
        <div className="grid gap-3 md:grid-cols-2">
          <TextField
            label="Tag"
            name="tag"
            required
            placeholder="v1.0.0"
            hint="Created from the target if it doesn't exist"
          />
          <TextField label="Target" name="target" defaultValue={header.repo.defaultBranch} />
        </div>
        <TextField label="Release title" name="name" />
        <MarkdownEditor
          value={body}
          onChange={setBody}
          owner={params.owner}
          repo={params.repo}
          label="Release notes"
          rows={10}
        />
        <CheckboxField label="This is a pre-release" name="prerelease" />
        <div className="flex gap-2">
          <Button type="submit" value="publish" variant="primary" pending={create.pending}>
            Publish release
          </Button>
          <Button type="submit" value="draft" pending={create.pending}>
            Save draft
          </Button>
        </div>
      </form>
    </Panel>
  );
}