"use client";

import Link from "next/link";
import { useState } from "react";
import { EyeOff, Eye, Store, Chrome } from "lucide-react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  CardDescription,
  CardFooter,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { toast } from "react-toastify";
import { Flip } from "react-toastify";
import checkPasswordStrength from "@/lib/strongPassCheck";
import { signupSchema } from "@/lib/zodSchemas";
import * as React from "react";
import { cn } from "@/lib/utils";
import { format } from "date-fns";
import { Calendar as CalendarIcon } from "lucide-react";
import { Calendar } from "@/components/ui/calendar";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

const SignupForm = ({
  onEmailSignup,
}: {
  onEmailSignup: (
    email: string,
    password: string,
    fullName: string,
  ) => Promise<void>;
}) => {
  const [passwordVisible1, setPasswordVisible1] = useState(false);
  const [confirmPasswordVisible, setConfirmPasswordVisible] = useState(false);

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(signupSchema),
  });
  // const [gender, setGender] = useState("");
  // const [date, setDate] = useState<Date>();
  const onSubmit = async (data: any) => {
    const password = data.password;
    const confirmPassword = data.confirmPassword;
    const full_Name = `${data.firstName} ${data.lastName}`;

    try {
      if (password !== confirmPassword) {
        toast.error("Passwords do not match", {
          position: "bottom-right",
          autoClose: 4000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          theme: "colored",
          transition: Flip,
        });
      } 

      else {
        onEmailSignup(data.email, data.password, full_Name);
      }
    } catch (error: any) {
      toast.error(error.message, {
        position: "bottom-right",
        autoClose: 4000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true,
        progress: undefined,
        theme: "colored",
        transition: Flip,
      });
    }
  };

  return (
      <div>
        <Card className="mx-auto max-w-md max-sm:max-w-[350px] bg-blue-2 p-4 shadow-lg shadow-black/30">
          <CardHeader>
            <CardTitle className="text-heading4-bold mx-auto mb-8 ">
              Create your <span className="text-blue-1 uppercase">Barrack</span>{" "}
              account
            </CardTitle>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit(onSubmit)}>
              <div className="grid gap-4 text-base-medium">
                <div className="grid grid-cols-2 gap-4 text-black">
                  <div className="grid gap-2">
                    <Label htmlFor="first-name">First name</Label>
                    <Input
                      id="first-name"
                      placeholder="Ex: Max"
                      {...register("firstName", {
                        required: "First name is required",
                      })}
                    />
                  </div>
                  <div className="grid gap-2">
                    <Label htmlFor="last-name">Last name</Label>
                    <Input
                      id="last-name"
                      placeholder="Ex: Robinson"
                      {...register("lastName", {
                        required: "Last name is required",
                      })}
                    />
                  </div>
                </div>

                <div className="grid gap-2 text-black">
                  <Label htmlFor="email">Enter Email</Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="m@example.com"
                    {...register("email", {
                      required: "Email is required",
                      pattern: {
                        value: /\S+@\S+\.\S+/,
                        message: "Invalid email address",
                      },
                    })}
                  />
                  {errors.email && typeof errors.email.message === "string" && (
                    <div className="text-red-500">{errors.email.message}</div>
                  )}
                </div>
                <div className="grid gap-2">
                  <div className="flex items-center text-black">
                    <Label htmlFor="password">Password</Label>
                  </div>
                  <div className="relative select-none">
                    <Input
                      id="password"
                      type={`${passwordVisible1 ? "text" : "password"}`}
                      {...register("password", {
                        required: "Password is required",
                        minLength: {
                          value: 8,
                          message:
                            "Password must be at least 8 characters long",
                        },
                      })}
                      className="pr-8"
                    />
                    {passwordVisible1 ? (
                      <Eye
                        className="absolute top-1/2 right-5 transform translate-x-1/2 -translate-y-1/2 w-5 cursor-pointer"
                        onClick={() => setPasswordVisible1(!passwordVisible1)}
                      />
                    ) : (
                      <EyeOff
                        className="absolute top-1/2 right-6 transform translate-x-1/2 -translate-y-1/2 w-5 cursor-pointer"
                        onClick={() => setPasswordVisible1(!passwordVisible1)}
                      />
                    )}
                  </div>
                  {errors.password &&
                    typeof errors.password.message === "string" && (
                      <div className="text-red-500">
                        {errors.password.message}
                      </div>
                    )}
                </div>
                <div className="grid gap-2">
                  <div className="flex items-center text-black">
                    <Label htmlFor="confirm_password">Confirm Password</Label>
                  </div>
                  <div className="relative select-none">
                    <Input
                      id="confirm_password"
                      type={`${confirmPasswordVisible ? "text" : "password"}`}
                      {...register("confirmPassword", {
                        required: "Please confirm your password",
                      })}
                      className="pr-8"
                    />
                    {confirmPasswordVisible ? (
                      <Eye
                        className="absolute top-1/2 right-5 transform translate-x-1/2 -translate-y-1/2 w-5 cursor-pointer"
                        onClick={() =>
                          setConfirmPasswordVisible(!confirmPasswordVisible)
                        }
                      />
                    ) : (
                      <EyeOff
                        className="absolute top-1/2 right-6 transform translate-x-1/2 -translate-y-1/2 w-5 cursor-pointer"
                        onClick={() =>
                          setConfirmPasswordVisible(!confirmPasswordVisible)
                        }
                      />
                    )}
                  </div>
                  {errors.confirmPassword &&
                    typeof errors.confirmPassword.message === "string" && (
                      <div className="text-red-500">
                        {errors.confirmPassword.message}
                      </div>
                    )}
                </div>
                <Button type="submit" className="w-full bg-black text-white">
                  Create Account
                </Button>
              </div>
            </form>
            <div className="mt-4 text-center text-sm ">
              Already have an account?{" "}
              <Link href="/login" className="underline">
                Sign in
              </Link>
            </div>
          </CardContent>
        </Card>
      </div>
  );
};

export default SignupForm;