Conditional Logic

"use client";

import { z } from "zod";
import { FormBuilder } from "@tilt-legal/cubitt-components/form-builder";

const schema = z.object({
  mode: z.enum(["basic", "advanced"]),
  name: z.string().min(1, "Required"),
  email: z.string().email().optional(),
  notes: z.string().optional(),
  accept: z.boolean().default(false),
});

type FormValues = z.infer<typeof schema>;

const formDefs = [
  {
    kind: "group",
    title: "Settings",
    children: [
      {
        kind: "field",
        name: "mode",
        label: "Mode",
        component: "radio",
        size: "full",
        options: [
          { id: "basic", value: "basic", label: "Basic" },
          { id: "advanced", value: "advanced", label: "Advanced" },
        ],
      },
    ],
  },
  {
    kind: "group",
    title: "Details",
    children: [
      {
        kind: "field",
        name: "name",
        label: "Name",
        component: "text",
        size: "half",
        requiredIf: () => true,
      },
      {
        kind: "field",
        name: "email",
        label: "Email",
        component: "email",
        size: "half",
        showIf: (v: FormValues) => v.mode === "advanced",
        requiredIf: (v: FormValues) => v.mode === "advanced",
      },
      {
        kind: "field",
        name: "notes",
        label: "Notes",
        component: "textarea",
        size: "full",
        readOnlyIf: (v: FormValues) => v.mode === "basic",
        disabledIf: (v: FormValues) => v.mode === "basic",
      },
    ],
  },
  {
    kind: "group",
    title: "Confirm",
    children: [
      {
        kind: "field",
        name: "accept",
        label: "I confirm the above is accurate",
        component: "checkbox",
        size: "full",
      },
    ],
  },
] as const satisfies FormDefs<FormValues>;

export default function LogicForm() {
  return (
    <FormBuilder.Single
      schema={schema}
      formDefs={formDefs}
      defaultValues={{
        mode: "basic",
        name: "",
        email: "",
        notes: "",
        accept: false,
      }}
      submitLabel="Continue"
      onSubmit={async (values) => console.log(values)}
    />
  );
}