Field

"use client"

import * as React from "react"
import { Field } from "@/components/candor/ui/field"
import { Input } from "@/components/candor/ui/input"
import { Textarea } from "@/components/candor/ui/textarea"
import { Button } from "@/components/candor/ui/button"

type Errors = { name?: string | undefined; email?: string | undefined }

// The app checks the values and says what is wrong; Field shows it, wires it to the control, and on a failed submit
// moves focus to the first field with a problem.
export default function Example() {
  const [errors, setErrors] = React.useState<Errors>({})
  const [attempt, setAttempt] = React.useState(0)
  return (
    <form
      noValidate
      className="flex w-full max-w-sm flex-col gap-4"
      onSubmit={(event) => {
        event.preventDefault()
        const data = new FormData(event.currentTarget)
        const next: Errors = {}
        if (!String(data.get("name")).trim()) next.name = "Enter a name for the agent"
        if (!/^\S+@\S+$/.test(String(data.get("email")))) next.email = "Enter an email address, like name@company.com"
        setErrors(next)
        setAttempt((n) => n + 1)
      }}
    >
      <Field label="Agent name" required error={errors.name} attempt={attempt}>
        <Input name="name" />
      </Field>
      <Field label="Escalation email" hint="Where the agent sends what it can't decide." required error={errors.email} attempt={attempt}>
        <Input name="email" type="email" autoComplete="email" />
      </Field>
      <Field label="Team" hint="Who the agent works for." trust={{ state: "provisional", by: "Intake agent" }}>
        <Input name="team" defaultValue="Customer success" />
      </Field>
      <HandleField />
      <Field label="Notes" optional>
        <Textarea name="notes" rows={3} />
      </Field>
      <Button type="submit" className="self-start">
        Save
      </Button>
    </form>
  )
}

const taken = ["admin", "support", "billing"]

// The app's own check, somewhere else (here a stand-in that takes half a second): while it runs the field says
// "Checking…"; then it shows the app's error, or "Looks good" when the app says the value passed. Any edit clears the
// last answer, so an empty or unchecked value claims nothing.
function HandleField() {
  const [value, setValue] = React.useState("")
  const [checking, setChecking] = React.useState(false)
  const [error, setError] = React.useState<string | undefined>()
  const [valid, setValid] = React.useState(false)
  const timer = React.useRef<ReturnType<typeof setTimeout>>(undefined)
  const check = (next: string) => {
    setValue(next)
    clearTimeout(timer.current)
    setError(undefined)
    setValid(false)
    if (!next) return setChecking(false)
    setChecking(true)
    timer.current = setTimeout(() => {
      const isTaken = taken.includes(next.toLowerCase())
      setError(isTaken ? "That handle is taken. Try another." : undefined)
      setValid(!isTaken)
      setChecking(false)
    }, 500)
  }
  React.useEffect(() => () => clearTimeout(timer.current), [])
  return (
    <Field label="Handle" hint="Try admin to see a taken one." validating={checking} valid={valid} error={error}>
      <Input name="handle" value={value} onChange={(e) => check(e.target.value)} />
    </Field>
  )
}