"use client";
import { useRouter } from "next/navigation";
import { useState, useEffect } from "react";
import { FormButton } from "@/app/components/form/forms";

export default function InspiredMorniSummary() {
  const router = useRouter();
  const [vibe, setVibe] = useState<string | null>(null);
  const [category, setCategory] = useState<string | null>(null);
  const [gender, setGender] = useState<string | null>(null);

  const storedVibe = localStorage.getItem("DefineVibe");
  const storedCategory = localStorage.getItem("categoryBasic");
  const storedGender = localStorage.getItem("genderExpression");

  useEffect(() => {
    const storedVibe = localStorage.getItem("DefineVibe");
    const storedCategory = localStorage.getItem("categoryBasic");
    const storedGender = localStorage.getItem("genderExpression");
    const d = storedVibe ? JSON.parse(storedVibe).join(',') : "Not specified";
    setVibe(d);
    setCategory(storedCategory || "Not specified");
    setGender(storedGender || "Not specified");
  }, []);

  const handleCategory = () => {

    const queryParams = new URLSearchParams();

 

    ////return false;
    if (vibe) queryParams.set("vibe", vibe);
    if (category) queryParams.set("category", slugify(category));
    if (gender) queryParams.set("gender", gender);
    const url = `/category?${queryParams.toString()}`;
    console.log(url);
   
    window.open(url, "_blank", "noopener,noreferrer");
  };
function slugify(text:any) {
  return text
    .toString()
    .toLowerCase()
    .trim()
    .replace(/[\s_]+/g, '-')           // Replace spaces and underscores with -
    .replace(/[^\w\-]+/g, '')          // Remove all non-word characters
    .replace(/\-\-+/g, '-');           // Replace multiple - with single -
}
  return (
    <>
      <div className="mx-auto flex w-full flex-col items-center justify-center text-center md:w-[50%]">
        <div className="mx-auto flex w-full flex-col md:w-[75%]">
          <h2 className="font-light">
            <span className="font-medium">Love</span> something from our{" "}
            <span className="font-medium">collection</span>?
          </h2>
          <p className="text-sm font-light">
            Select the piece that speaks to you, just share any custom
            adjustments at checkout.
          </p>
        </div>
      </div>
      <div className="cc-vision-wrap fullHeight">
        <div className="ccvision-scrollcontent noBottomBtn">
          <div className="mx-auto flex w-full flex-col items-center justify-center gap-8 text-center text-sm font-light capitalize md:w-[50%]">
            <div className="flex flex-col pt-10">
              <div>Vibe</div>
              <div className="font-bogart text-xl font-light">{vibe}</div>
            </div>
            <div className="flex flex-col">
              <div>Gender</div>
              <div className="font-bogart text-xl font-light">{gender}</div>
            </div>
            <div className="flex flex-col">
              <div>Category</div>
              <div className="font-bogart text-xl font-light">{category}</div>
            </div>
          </div>
          <div className="mx-auto mt-4 flex w-full flex-col items-center justify-between md:w-[40%]">
            <FormButton
              id="btn_inspired_morni_store"
              label="Visit Morni's store"
              type="submit"
              color="gray"
              hairline="blue"
              disabled={false}
              onClick={handleCategory}
            />
          </div>
        </div>
      </div>
    </>
  );
}