"use client";

import { useActionState } from "react";
import { createOrgAction } from "@/app/actions/orgs";
import { PlusIcon } from "@/components/icons";
import { TextareaField, TextField } from "@/components/settings-fields";
import { PlateBody, PlateFooter } from "@/components/settings-plate";
import { Alert, Box, Button } from "@/components/ui";

export function NewOrgForm() {
  const [state, action, pending] = useActionState(createOrgAction, undefined);
  return (
    <form action={action}>
      <Box>
        <PlateBody>
          <TextField
            label="Organization name"
            description="Its address and the first part of its repositories’ names, e.g. /acme/website. It can’t be changed."
            name="name"
            required
            autoFocus
            maxLength={39}
            pattern="[A-Za-z0-9][A-Za-z0-9\-]*"
            placeholder="acme"
          />
          <TextField label="Display name" optional name="displayName" maxLength={100} placeholder="Acme Inc." />
          <TextareaField label="Description" optional name="description" minRows={2} maxLength={300} placeholder="What does this organization work on?" />
          <p className="type-body text-ink2">You’ll be its owner. Next, invite people and choose what each of them may do.</p>
          {state?.error && <Alert>{state.error}</Alert>}
        </PlateBody>
        <PlateFooter>
          <Button variant="primary" icon={<PlusIcon />} disabled={pending}>
            {pending ? "Creating…" : "Create Organization"}
          </Button>
        </PlateFooter>
      </Box>
    </form>
  );
}