"use client";
import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { signUpFormSchema } from "@/lib/schemas";
import { zodResolver } from "@hookform/resolvers/zod";
import Link from "next/link";
import { useSearchParams } from "next/navigation";

import { useForm } from "react-hook-form";
import { toast } from "sonner";
import type { z } from "zod";
import { DatePicker } from "../ui/datepicker";


export default function SignUpForm() {
  const params = useSearchParams();
  console.log(params);
  const phone_number = params.get("phone_number");
  const form = useForm<z.infer<typeof signUpFormSchema>>({
    resolver: zodResolver(signUpFormSchema),
    defaultValues: {
      phoneNumber: phone_number ?? "",
      name: "",
      id_card: "",
      house_name: "",
      island: "F.Dharanboodhoo",
    },
  });

  function onSubmit(values: z.infer<typeof signUpFormSchema>) {
    console.log(values);
  }

  return (
    <Form {...form}>
      <form
        onSubmit={form.handleSubmit(onSubmit)}
        className="max-w-xs w-full bg-white dark:bg-transparent dark:border-2 shadow rounded-lg mx-auto"
      >
        <h4 className="text-center rounded m-2 text-xl font-bold text-gray-600 bg-gray-200 py-4">
          Sign up
        </h4>
        <div className="py-2 px-4 my-2">
          <FormField
            control={form.control}
            name="name"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Name</FormLabel>
                <FormControl>
                  <Input placeholder="eg: Shihaam" type="text" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="id_card"
            render={({ field }) => (
              <FormItem>
                <FormLabel>ID Card</FormLabel>
                <FormControl>
                  <Input placeholder="Axxxxxx" type="" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="island"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Island</FormLabel>
                <FormControl>
                  <Input
                    placeholder="F.Dharanboodhoo"
                    disabled
                    type=""
                    {...field}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="house_name"
            render={({ field }) => (
              <FormItem>
                <FormLabel>House Name</FormLabel>
                <FormControl>
                  <Input placeholder="eg: Skyvilla" type="text" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="dob"
            render={({ field }) => (
              <FormItem className="flex flex-col mt-2">
                <FormLabel>Date of birth</FormLabel>

                <DatePicker
                  date={field.value}
                  setDate={field.onChange}
                />

                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="phoneNumber"
            render={({ field }) => (
              <FormItem className="flex flex-col items-start mt-2">
                <FormLabel>Phone number</FormLabel>
                <FormControl className="w-full">
                  <div className="flex rounded-lg shadow-sm shadow-black/5">
                    <div className="relative">
                      <span
                        className="peer inline-flex h-full appearance-none items-center rounded-none rounded-s-lg border border-input bg-background pe-4 ps-3 text-sm text-muted-foreground transition-shadow hover:bg-accent hover:text-accent-foreground focus:z-10 focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
                        aria-label="Protocol"
                      >
                        <option value="https://">+960</option>
                      </span>
                    </div>
                    <Input
                      className="-ms-px rounded-s-none shadow-none focus-visible:z-10"
                      // disabled={Boolean(phone_number ?? "")}
                      placeholder="9xxxxxx / 7xxxxxx"
                      {...field}
                    />
                  </div>
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <Button className="mt-4 w-full" type="submit">
            Submit
          </Button>
        </div>
        <div className="mb-4 text-center text-sm">
          Already have an account?{" "}
          <Link href="login" className="underline">
            login
          </Link>
        </div>

      </form>
    </Form>
  );
}