"use client";

import pb from "@/lib/pocketbase";
import { contactUsValidationSchema } from "@/utils/form";
import { yupResolver } from "@hookform/resolvers/yup";
import React from "react";
import { useForm } from "react-hook-form";
import { toast } from "react-toastify";

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

  const onSubmit = async (data: {
    firstName: string;
    lastName: string;
    email: string;
    phoneNumber?: string;
    note?: string;
  }) => {
    try {
      await pb.collection("contact").create({ source: "contactus", ...data });
      localStorage.setItem("contactus", JSON.stringify(data));
    } catch (error) {
      if (error instanceof Error) {
        toast.error(error.message, {
          position: "bottom-left",
          autoClose: 5000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          theme: "colored",
        });
      }
    }
  };
  return (
    <>
      {/* Contact Us */}
      <div className="max-w-[85rem] px-4 sm:px-6 lg:px-8 mx-auto pb-10">
        <div className="max-w-2xl lg:max-w-5xl mx-auto">
          <div className="mt-12 grid items-start lg:grid-cols-2 gap-6 lg:gap-16">
            {/* Card */}
            <div className="flex flex-col rounded-xl p-4 sm:p-6 lg:p-8  bg-base-200 min-h-[20rem] shadow-lg">
              <h2 className="mb-8 text-xl font-semibold text-base-content ">
                Fill in the form
              </h2>
              {typeof window !== "undefined" &&
              !localStorage.getItem("contactus") ? (
                <form onSubmit={handleSubmit(onSubmit)}>
                  <div className="grid gap-4 gap-y-0">
                    {/* Grid */}
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-0">
                      <div>
                        <label
                          htmlFor="hs-firstname-contacts-1"
                          className="sr-only"
                        >
                          First Name
                        </label>
                        <input
                          type="text"
                          id="hs-firstname-contacts-1"
                          className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
                          placeholder="First Name"
                          {...register("firstName")}
                        />
                        <div className="text-start text-sm italic text-error-content">
                          {errors.firstName?.message}&nbsp;
                        </div>
                      </div>
                      <div>
                        <label
                          htmlFor="hs-lastname-contacts-1"
                          className="sr-only"
                        >
                          Last Name
                        </label>
                        <input
                          type="text"
                          id="hs-lastname-contacts-1"
                          className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
                          placeholder="Last Name"
                          {...register("lastName")}
                        />
                        <div className="text-start text-sm italic text-error-content">
                          {errors.lastName?.message}&nbsp;
                        </div>
                      </div>
                    </div>
                    {/* End Grid */}
                    <div>
                      <label htmlFor="hs-email-contacts-1" className="sr-only">
                        Email
                      </label>
                      <input
                        type="email"
                        id="hs-email-contacts-1"
                        autoComplete="email"
                        className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
                        placeholder="Email"
                        {...register("email")}
                      />
                      <div className="text-start text-sm italic text-error-content">
                        {errors.email?.message}&nbsp;
                      </div>
                    </div>
                    <div>
                      <label htmlFor="hs-phone-number-1" className="sr-only">
                        Phone Number
                      </label>
                      <input
                        type="text"
                        id="hs-phone-number-1"
                        className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
                        placeholder="Phone Number"
                        {...register("phoneNumber")}
                      />
                      <div className="text-start text-sm italic text-error-content">
                        {errors.phoneNumber?.message}&nbsp;
                      </div>
                    </div>
                    <div>
                      <label htmlFor="hs-about-contacts-1" className="sr-only">
                        Details
                      </label>
                      <textarea
                        id="hs-about-contacts-1"
                        rows={4}
                        className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
                        placeholder="Details"
                        defaultValue={""}
                        {...register("note")}
                      />
                      <div className="text-start text-sm italic text-error-content">
                        {errors.note?.message}&nbsp;
                      </div>
                    </div>
                  </div>
                  {/* End Grid */}
                  <div className="mt-4 grid">
                    <button type="submit" className="btn btn-primary">
                      Send inquiry
                    </button>
                  </div>
                  <div className="mt-3 text-center">
                    <p className="text-sm text-base-content ">
                      We&apos;ll get back to you in 1-2 business days.
                    </p>
                  </div>
                </form>
              ) : (
                <p className="text-sm text-base-content">
                  We have received your details and will be in touch!
                </p>
              )}
            </div>
            {/* End Card */}
            <div className="divide-y divide-white ">
              {/* Icon Block */}
              <div className="flex gap-x-7 py-6">
                <svg
                  className="flex-shrink-0 size-6 mt-1.5 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="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v5Z" />
                  <path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1" />
                </svg>
                <div className="grow">
                  <h3 className="font-semibold text-base-content ">FAQ</h3>
                  <p className="mt-1 text-sm text-base-content ">
                    Search our FAQ for answers to anything you might ask.
                  </p>
                  <a
                    className="mt-2 inline-flex items-center gap-x-2 text-sm font-medium text-base-content hover:text-base-content  "
                    href="/"
                  >
                    Visit FAQ
                    <svg
                      className="flex-shrink-0 size-2.5 transition ease-in-out group-hover:translate-x-1"
                      width={16}
                      height={16}
                      viewBox="0 0 16 16"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        fillRule="evenodd"
                        clipRule="evenodd"
                        d="M0.975821 6.92249C0.43689 6.92249 -3.50468e-07 7.34222 -3.27835e-07 7.85999C-3.05203e-07 8.37775 0.43689 8.79749 0.975821 8.79749L12.7694 8.79748L7.60447 13.7596C7.22339 14.1257 7.22339 14.7193 7.60447 15.0854C7.98555 15.4515 8.60341 15.4515 8.98449 15.0854L15.6427 8.68862C16.1191 8.23098 16.1191 7.48899 15.6427 7.03134L8.98449 0.634573C8.60341 0.268455 7.98555 0.268456 7.60447 0.634573C7.22339 1.00069 7.22339 1.59428 7.60447 1.9604L12.7694 6.92248L0.975821 6.92249Z"
                        fill="currentColor"
                      />
                    </svg>
                  </a>
                </div>
              </div>
              {/* End Icon Block */}

              {/* Icon Block */}
              <div className=" flex gap-x-7 py-6">
                <svg
                  className="flex-shrink-0 size-6 mt-1.5 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="M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z" />
                  <path d="m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10" />
                </svg>
                <div className="grow">
                  <h3 className="font-semibold text-base-content ">
                    Contact us by email
                  </h3>
                  <p className="mt-1 text-sm text-base-content ">
                    If you wish to write us an email instead please use
                  </p>
                  <a
                    className="mt-2 inline-flex items-center gap-x-2 text-sm font-medium text-base-content hover:text-base-content  "
                    href="mailto:developer@biz365.com.au"
                  >
                    developer@biz365.com.au
                  </a>
                </div>
              </div>
              {/* End Icon Block */}
            </div>
          </div>
        </div>
      </div>
      {/* End Contact Us */}
    </>
  );
};

export default FormLeftDescriptionRightContactUs;