gitfor/platform

import { useState } from "react";
import { checkPagesDomain, disablePages, savePages, setPagesDomain } from "~/fns/pages";
import type { getPages } from "~/fns/pages";
import { useAction } from "~/hooks/use-action";
import { Badge } from "~/ui/Badge";
import { Panel } from "~/ui/Panel";
import { Button } from "~/ui/Button";
import { CheckboxField, SelectField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";

export type PagesData = Awaited<ReturnType<typeof getPages>>;
type RepoParams = { owner: string; repo: string };

const SOURCES = [
  { value: "branch", label: "Deploy from a branch" },
  { value: "workflow", label: "Deploy from a workflow artifact" },
] as const;

export function PagesSourceForm({ data, params }: { data: PagesData; params: RepoParams }) {
  const save = useAction(savePages);
  const disable = useAction(disablePages);
  const [source, setSource] = useState<"branch" | "workflow">(data.site?.source ?? "branch");
  const branchOptions = (data.branches.length ? data.branches : [data.defaultBranch]).map((name) => ({
    value: name,
    label: name,
  }));
  return (
    <Panel title="Build and deployment" actions={data.site && <Badge tone="success">Enabled</Badge>}>
      <form
        className="space-y-4 p-4"
        onSubmit={async (event) => {
          event.preventDefault();
          const form = new FormData(event.currentTarget);
          await save.run({
            data: {
              ...params,
              source,
              branch: String(form.get("branch") ?? data.defaultBranch),
              folder: String(form.get("folder") ?? ""),
              artifactName: String(form.get("artifactName") ?? "pages"),