import pb from "@/lib/pocketbase";
import { waitinglistValidationSchema } from "@/utils/form";
import { yupResolver } from "@hookform/resolvers/yup";
import React, { useEffect } from "react";
import { useForm } from "react-hook-form";

import Icon from "@/components/icon";
import colors, { hexToRgb } from "@/utils/colors";
import Footer from "@/components/Footer";
import { useTheme } from "next-themes";

const WaitingListWithImageHero = () => {
  const { theme } = useTheme();
  const backgroundColor = hexToRgb(colors[theme ?? "light"]["base-100"]);

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(waitinglistValidationSchema),
  });

  const onSubmit = (data: {
    firstName: string;
    lastName: string;
    email: string;
  }) => {
    localStorage.setItem("contact", JSON.stringify(data));
    pb.collection("contact").create(data);
  };
  return (
    <div
      className="h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed"
      style={{
        backgroundImage: `linear-gradient(rgba(${backgroundColor?.r}, ${backgroundColor?.g}, ${backgroundColor?.b}, 0.7), rgba(135, 80, 156, 0.05)), url(/images/hero.jpg)`,
      }}
    >
      <div className="h-screen  w-full bg-clip flex items-center justify-center">
        <div className="text-center py-8 px-4 sm:px-6 lg:px-8">
          <h1 className="text-3xl text-base-content  sm:text-4xl whitespace-nowrap flex flex-row justify-center pb-6 gap-x-3">
            <Icon name="LeafThree24Filled" size="xlarge" />
            Bethel Farms
          </h1>
          {typeof window !== "undefined" && !localStorage.getItem("contact") ? (
            <>
              <h2 className="text-2xl text-base-content">
                Get notified when we launch
              </h2>
              <form onSubmit={handleSubmit(onSubmit)}>
                <div className="mt-8 space-y-0">
                  <div>
                    <label
                      htmlFor="hs-cover-with-gradient-form-name-1"
                      className="sr-only"
                    >
                      First name
                    </label>
                    <div className="relative">
                      <input
                        {...register("firstName")}
                        type="text"
                        id="hs-cover-with-gradient-form-name-1"
                        className="  py-3 ps-11 pe-4 block w-full bg-base-100/[.03] border-white/20 placeholder:text-base-content dark:placeholder:bg-base-content  placeholder:text-base-content  rounded-lg text-sm focus:border-white/30 focus:ring-white/30 sm:p-4 sm:ps-11"
                        placeholder="First name"
                      />
                      <div className="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-4">
                        <svg
                          className="flex-shrink-0 size-4 text-base-content  "
                          xmlns="http://www.w3.org/2000/svg"
                          width={24}
                          height={24}
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          strokeWidth={2}
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        >
                          <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
                          <circle cx={12} cy={7} r={4} />
                        </svg>
                      </div>
                    </div>
                    <div className="text-start text-sm italic text-error-content">
                      {errors.firstName?.message}&nbsp;
                    </div>
                  </div>
                  <div>
                    <label
                      htmlFor="hs-cover-with-gradient-form-name-1"
                      className="sr-only"
                    >
                      Last name
                    </label>
                    <div className="relative">
                      <input
                        {...register("lastName")}
                        type="text"
                        id="hs-cover-with-gradient-form-name-1"
                        className="  py-3 ps-11 pe-4 block w-full bg-base-100/[.03] border-white/20 placeholder:text-base-content dark:placeholder:bg-base-contentntent  placeholder:text-base-content  rounded-lg text-sm focus:border-white/30 focus:ring-white/30 sm:p-4 sm:ps-11"
                        placeholder="Last name"
                      />
                      <div className="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-4">
                        <svg
                          className="flex-shrink-0 size-4 text-base-content"
                          xmlns="http://www.w3.org/2000/svg"
                          width={24}
                          height={24}
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          strokeWidth={2}
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        >
                          <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
                          <circle cx={12} cy={7} r={4} />
                        </svg>
                      </div>
                    </div>
                    <div className="text-start text-sm italic text-error-content">
                      {errors.lastName?.message}&nbsp;
                    </div>
                  </div>
                  <div>
                    <label
                      htmlFor="hs-cover-with-gradient-form-email-1"
                      className="sr-only"
                    >
                      Email address
                    </label>
                    <div className="relative">
                      <input
                        {...register("email")}
                        type="email"
                        id="hs-cover-with-gradient-form-email-1"
                        className=" py-3 ps-11 pe-4 block w-full bg-base-100/[.03] border-white/20 text-base-content  placeholder:text-base-content dark:placeholder:bg-base-content  rounded-lg text-sm focus:border-white/30 focus:ring-white/30 sm:p-4 sm:ps-11"
                        placeholder="Email address"
                      />
                      <div className="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-4">
                        <svg
                          className="flex-shrink-0 size-4 text-base-content  "
                          xmlns="http://www.w3.org/2000/svg"
                          width={24}
                          height={24}
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          strokeWidth={2}
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        >
                          <rect width={20} height={16} x={2} y={4} rx={2} />
                          <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
                        </svg>
                      </div>
                    </div>
                    <div className="text-start text-sm italic text-error-content">
                      {errors.email?.message}&nbsp;
                    </div>
                  </div>
                  <div className="grid">
                    <button
                      className="btn btn-primary bg-base-content"
                      type="submit"
                    >
                      Join the waitlist
                      <svg
                        className="flex-shrink-0 size-4"
                        xmlns="http://www.w3.org/2000/svg"
                        width={24}
                        height={24}
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth={2}
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      >
                        <path d="m9 18 6-6-6-6" />
                      </svg>
                    </button>
                  </div>
                </div>
              </form>
            </>
          ) : (
            <h2 className="text-2xl text-base-content  sm:text-4xl">
              You are on our waiting list. We will be in touch!
            </h2>
          )}
        </div>
      </div>
      <Footer />
    </div>
  );
};

export default WaitingListWithImageHero;