"use client";
import * as React from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input";
import { UserIcon, EnvelopeSimpleIcon, PaletteIcon, CodeIcon, HardDrivesIcon, UserPlusIcon } from "@phosphor-icons/react";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";

const schema = z.object({
  username: z.string().min(3, "Minimal 3 huruf, ya."),
  email: z.email("Email-nya belum valid."),
  komisi: z.string().min(1, "Pilih satu komisi dulu."),
  newsletter: z.boolean(),
  terms: z.boolean().refine((v) => v, "Wajib setuju tata tertib."),
});
type Values = z.infer<typeof schema>;

export default function FormDemo() {
  const [done, setDone] = React.useState<string | null>(null);
  const form = useForm<Values>({
    resolver: zodResolver(schema),
    defaultValues: { username: "", email: "", komisi: "", newsletter: true, terms: false },
  });
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit((v) => setDone(v.username))} className="grid w-full max-w-sm gap-5">
        <FormField
          control={form.control}
          name="username"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Username</FormLabel>
              <InputGroup>
                <InputGroupAddon><UserIcon weight="bold" /></InputGroupAddon>
                <FormControl><InputGroupInput placeholder="anggota_dewan" {...field} /></FormControl>
              </InputGroup>
              <FormDescription>Nama yang tampil di risalah sidang.</FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <InputGroup>
                <InputGroupAddon><EnvelopeSimpleIcon weight="bold" /></InputGroupAddon>
                <FormControl><InputGroupInput type="email" placeholder="you@parlemen.dev" {...field} /></FormControl>
              </InputGroup>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="komisi"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Komisi</FormLabel>
              <Select onValueChange={field.onChange} value={field.value}>
                <FormControl>
                  <SelectTrigger><SelectValue placeholder="Pilih komisi" /></SelectTrigger>
                </FormControl>
                <SelectContent>
                  <SelectItem value="ui"><PaletteIcon weight="bold" />Komisi UI</SelectItem>
                  <SelectItem value="api"><CodeIcon weight="bold" />Komisi API</SelectItem>
                  <SelectItem value="infra"><HardDrivesIcon weight="bold" />Komisi Infra</SelectItem>
                </SelectContent>
              </Select>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="newsletter"
          render={({ field }) => (
            <FormItem className="flex items-center justify-between rounded-[1.4rem] bg-surface-sunken px-5 py-3 shadow-well">
              <FormLabel className="pl-0">Kabar sidang mingguan</FormLabel>
              <FormControl><Switch checked={field.value} onCheckedChange={field.onChange} /></FormControl>
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="terms"
          render={({ field }) => (
            <FormItem>
              <div className="flex items-center gap-3">
                <FormControl><Checkbox checked={field.value} onCheckedChange={(v) => field.onChange(v === true)} /></FormControl>
                <FormLabel className="pl-0">Saya setuju tata tertib parlemen</FormLabel>
              </div>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit"><UserPlusIcon weight="bold" /> Daftar</Button>
        {done && <p className="text-center text-sm font-bold text-success">Selamat bergabung, {done}!</p>}
      </form>
    </Form>
  );
}
Installation
