import Layout from "@/components/ui/Layout";
import { Category } from "@prisma/client";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import Input from "@/components/ui/Input";
import { api } from "@/utils/api";

const RegisterSchema = z.object({
  name: z.string(),
  email: z.string(),
  fatherName: z.string(),
  motherName: z.string(),
  dateOfBirth: z.date(),
  aadharCardNumber: z.number(),
  address: z.string(),
  schoolNameAndAddress: z.string(),
  events: z.tuple([z.string(), z.string()]),
  gender: z.enum(["MALE", "FEMALE"]),
  phoneNumber: z.number(),
  altPhoneNumber: z.number(),
  category: z.nativeEnum(Category),
});

type FormData = z.infer<typeof RegisterSchema>;

export default function RegisterPage() {
  const { register } = useForm<FormData>({
    resolver: zodResolver(RegisterSchema),
  });
  const {} = api.event.getEvents.useQuery();
  return (
    <Layout>
      <div className="flex flex-col">
        <h2 className="p-4 text-3xl font-bold">Register for an event</h2>
        <form className="flex flex-col gap-2 p-4">
          <div className="flex flex-col gap-1">
            <label>Name</label>
            <Input
              {...(register("name"), { required: true })}
              placeholder="Enter your name"
            />
          </div>
          <div className="flex flex-col gap-1">
            <label>E-mail</label>
            <Input
              {...register("email", { required: true })}
              type="email"
              placeholder="Enter your email"
            />
          </div>

          <div className="flex flex-col gap-1">
            <label>Father's Name</label>
            <Input
              {...register("fatherName", { required: true })}
              placeholder="Enter your father's name"
            />
          </div>
          <div className="flex flex-col gap-1">
            <label>Mother's Name</label>
            <Input
              {...register("motherName", { required: true })}
              placeholder="Enter your mother's name"
            />
          </div>
          <div className="flex flex-col gap-1">
            <label>Date of birth</label>
            <Input
              {...register("dateOfBirth", { required: true })}
              type="date"
              placeholder="Enter your date of birth"
            />
          </div>

          <div className="flex flex-col gap-1">
            <label>Aadhar Card Number</label>
            <Input
              {...register("aadharCardNumber", { required: true })}
              type="number"
              placeholder="Enter your aadhar card number"
            />
          </div>

          <div className="flex flex-col gap-1">
            <label>Address</label>
            <Input
              {...register("address", { required: true })}
              placeholder="Enter your address"
            />
          </div>
          <div className="flex flex-col gap-1">
            <label>School name and Address</label>
            <Input
              {...register("schoolNameAndAddress", { required: true })}
              placeholder="Enter your school name and address"
            />
          </div>

          <div className="flex flex-col gap-1"></div>
        </form>
      </div>
    </Layout>
  );
}