"use client";

import { getInputProps, useForm, type FieldMetadata } from "@conform-to/react";
import { getZodConstraint, parseWithZod } from "@conform-to/zod";
import { signup } from "~/app/actions/auth";
import { signupSchema } from "~/lib/schema/auth";
import { useActionState } from "react";
import { type z } from "zod";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import { Label } from "./ui/label";

export function SignupForm() {
  const [lastResult, action, isSubmitting] = useActionState(signup, undefined);
  const [form, fields] = useForm({
    id: "signup",
    lastResult,
    constraint: getZodConstraint(signupSchema),
    shouldValidate: "onBlur",
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: signupSchema });
    },
  });
  return (
    <form
      className="flex flex-col gap-2"
      id={form.id}
      onSubmit={form.onSubmit}
      action={action}
      noValidate
    >
      <Field
        field={fields.firstName}
        label="First Name"
        placeholder="First Name"
        type="text"
      />

      <Field
        field={fields.lastName}
        label="Last Name"
        placeholder="Last Name"
        type="text"
      />

      <Field
        field={fields.email}
        label="Email"
        placeholder="example@email.com"
        type="email"
      />

      <Field field={fields.password} label="Password" type="password" />

      <Button className="mt-2" type="submit" disabled={isSubmitting}>
        Sign up
      </Button>
    </form>
  );
}

function Field({
  field,
  label,
  placeholder,
  type,
}: {
  field: FieldMetadata<string, z.infer<typeof signupSchema>, string[]>;
  label: string;
  placeholder?: string;
  type: "email" | "password" | "text";
}) {
  const { key, ...inputProps } = getInputProps(field, { type });
  return (
    <div>
      <Label htmlFor={inputProps.id}>{label}:</Label>
      <Input placeholder={placeholder} key={key} {...inputProps} />
      <p>{field.errors?.join(", ")}</p>
    </div>
  );
}