"use client";

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

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

  const onSubmit = async (data: { email: string }) => {
    try {
      await pb.collection("contact").create({ source: "newsletter", ...data });
      localStorage.setItem("newsletter", 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 (
    <section>
      <div className="max-w-6xl mx-auto px-4 sm:px-6">
        {/* CTA box */}
        <div
          className="relative bg-gradient-to-r from-primary to-secondary py-10 px-8 md:py-16 md:px-12"
          data-aos="fade-up"
        >
          {typeof window !== "undefined" &&
          !localStorage.getItem("newsletter") ? (
            <div className="relative flex flex-col lg:flex-row justify-between items-center">
              <div className="mb-6 lg:mr-16 lg:mb-0 text-center lg:text-left lg:w-1/2 text-primary-content">
                <h3 className=" mb-2 text-3xl font-black">
                  Stay Ahead of the Curve
                </h3>
                <p className=" text-lg">
                  Join our newsletter to get top news before anyone else.
                </p>
              </div>

              <div className="w-full lg:w-1/2">
                <form
                  onSubmit={handleSubmit(onSubmit)}
                  className="flex flex-col sm:flex-row justify-center max-w-xs mx-auto sm:max-w-md lg:max-w-none gap-x-2"
                >
                  <div className="w-full">
                    <input
                      id="NewsletterEmail"
                      type="text"
                      className="py-3 px-4 block w-full 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…"
                      aria-label="Email…"
                      {...register("email")}
                    />
                    <div className="text-start text-sm italic text-error-content">
                      {errors.email?.message}&nbsp;
                    </div>
                  </div>
                  <button className="btn text-primary-content btn-neutral">
                    Subscribe
                  </button>
                </form>
              </div>
            </div>
          ) : (
            <div className="relative flex flex-col lg:flex-row justify-between items-center text-primary-content">
              <h3 className=" mb-2 text-3xl font-black">
                Thanks for subscribing. You won&apos;t regret it!
              </h3>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

export default Newsletter;