"use client";

// import { useSubscriber } from "@ctx/SubscriberContext";

import Image from "next/image";
import Link from "next/link";
import { useContext, useEffect, useRef, useState } from "react";

import { motion } from "framer-motion";

import { useRouter } from "next/navigation";

import logo from "../../assets/images/logo.png";

const Navbar = ({ theme }) => {
  const router = useRouter();

  const NavBarData = [
    {
      id: 1,
      name: "Home",
      children: [],
      href: "/"
    },
    {
      id: 2,
      name: "Categories",
      href: "/categories",
      children: [{ name: "Category1", href: "/categories/category1" }, { name: "Category2", href: "/categories/category2" }, { name: "Category3", href: "/categories/category3" }],
    },
    {
      id: 3,
      name: "Brands",
      href: "/brands",
      children: [{ name: "brand1", href: "/categories/brand1" }, { name: "brand2", href: "/categories/brand2" }, { name: "brand3", href: "/categories/brand3" }],
    },
    {
      id: 4,
      name: "About Us",
      href: "about-us",
      children: [],
    },
  ];

  const [closeNavbar, setClosNavbar] = useState(false);
  const [activeStepNavbar, setActiveStepNavbar] = useState(null);

  const [isScrolled, setIsScrolled] = useState(false);
  // const [hoverItemNavbar, setHoverItemNavbar] = useState(-1);

  const [responsiveNavBarItemStep, setResponsiveNavBarItemStep] =
    useState(false);
  const ref = useRef(null);

  const handleResetFramer = () => {
    setRestFramer(false);
    setTimeout(() => {
      setRestFramer(true);
    }, 100);
  };

  const toLeft = {
    visible: (custom) => ({
      opacity: ["0", "1"],
      // y: ["-30%", "0%"],
      transition: { delay: custom * 0.06 },
    }),
  };

  useEffect(() => {
    const handleScroll = () => {
      const scrollTop = window.scrollY;
      setIsScrolled(scrollTop > 0);
    };

    window.addEventListener("scroll", handleScroll);

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);





  return (
    <>
      {/* <div className="bg-sky-900 p-3 flex">
        <p className="mb-0 text-white"> salam</p>
      </div> */}
      <div
        className={` max-[1023px]:hidden  lg:block tr03  ${isScrolled
          ? "fixed w-full !z-[1000] top-0 tr"
          : "pt-10 xs:px-10 lg:px-5 xl:px-20 "
          }`}
      >
        <nav
          className={`  rtl flex justify-between w-full  pl-10  ${isScrolled ? " bg-gray-100 " : " rounded-2xl"
            }
          ${theme == 1 ? "bg-gray-100 " : " "}`}
        >
          <div className="w-full rtl p-4 mr-2">
            <div className="flex">
              <div className="mr-2 w-fit px-3 p-2  text-sm bg-white flex  rounded-xl ">
                <p className="mb-0">Export </p>
              </div>
              <div className="mr-2 w-fit px-3 p-2  text-sm bg-white flex  rounded-xl ">
                <p className="mb-0">Industrial </p>
              </div>

              <div className="mr-2 w-fit px-3 p-2  text-sm bg-white flex  rounded-xl ">
                <p className="mb-0">en</p>
              </div>


            </div>
          </div>
          <div className="w-full flex ltr ">

            <div className="size-[50px] relative bg-white rounded-lg p-2 flex flex-col items-center rounded-tl-2xl justify-center my-auto">
              <Image
                src={logo}
                fill
                alt="llc "
                className="mx-auto object-contain"
              />

            </div>

            {NavBarData.map((e, index) => (
              <>
                <div
                  key={index}
                  className={` mx-2 px-2 w-fit text-sm  p-7 ${1
                    ? "bg-visa2-200  rounded-full !text-white text-shadow pb-1 relative"
                    : ""
                    } `}
                  onMouseEnter={() => {
                    // setHoverItemNavbar(index);
                    setActiveStepNavbar(e.id);
                  }}
                  onMouseLeave={() => {
                    // setHoverItemNavbar(-1);
                    setActiveStepNavbar(null);
                  }}
                // onClick={() => context.setOpenNavBarServices(false)}
                >
                  <Link
                    href={`${e.href}`}
                    className={` ${isScrolled ? "text-black" : "text-white"}  ${theme == 1 ? "text-sm !text-black" : " "
                      }`}
                  >
                    {e.name}
                    {e.children.length > 0 && ""}
                  </Link>

                  {e.children.length > 0 && e.id == activeStepNavbar && (
                    <ul className="absolute left-0 mt-2 w-48 bg-white text-black rounded-lg shadow-lg z-50 overflow-hidden">
                      {
                        e.children.map((c, index) => (

                          <li key={index} className="px-4 py-2 hover:bg-gray-100 cursor-pointer">
                            <Link href={c.href}>
                              {c.name}
                            </Link>
                          </li>
                        ))
                      }

                    </ul>
                  )}
                </div>
              </>
            ))}
          </div>


        </nav>
      </div>

      {/* reponsive navbar */}
      {/* responsive part */}
      {/* responsive part */}
      {/* responsive part */}
      {/* responsive part */}
      {/* responsive part */}

      <div
        className={`sm:block lg:hidden ${isScrolled & !closeNavbar ? "sticky top-0 z-[100] w-full" : " pt-2"
          }`}
      >
        <div
          className={`bg-gray-100 flex justify-between rtl p-3   ${isScrolled
            ? " rounded-bl-xl rounded-br-[40px]"
            : "mx-2 rounded-xl rounded-br-[40px]"
            }`}
        >
          {/* <Link href={"/"} className="w-full"> */}
          <div className="  w-full mx-1 flex  ">
            <div className="xs:w-[60px] md:w-[100px] xs:mt-[5px]  mt-[12px] ">
              <Image
                src={logo}
                width={500}
                height={500}
                alt="llc"
                className="mx-auto"
              />
            </div>
          </div>
          {/* </Link> */}
          <div
            className=" p-3 w-full mx-1 text-left"
            onClick={() => setClosNavbar(true)}
          >
            <svg
              width="30"
              height="30"
              viewBox="0 0 235 124"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              className="mr-auto opacity-65"
            >
              <path
                d="M160.75 124C152.328 124 145.5 117.172 145.5 108.75V108.75C145.5 100.327 152.328 93.4995 160.75 93.4995L219.75 93.4995C228.172 93.4995 235 100.327 235 108.75V108.75C235 117.172 228.172 124 219.75 124L160.75 124ZM88.4999 26.4998C81.3202 26.4998 75.5 20.6795 75.5 13.4999V13.4999C75.5 6.32025 81.3202 0.499997 88.4999 0.499997L222 0.499997C229.18 0.499997 235 6.32025 235 13.4999V13.4999C235 20.6795 229.18 26.4998 222 26.4998L88.4999 26.4998ZM13 72.4996C6.09643 72.4996 0.499998 66.9031 0.499997 59.9996V59.9996C0.499997 53.096 6.09643 47.4996 13 47.4996L222.5 47.4996C229.404 47.4996 235 53.096 235 59.9996V59.9996C235 66.9031 229.404 72.4996 222.5 72.4996L13 72.4996Z"
                fill="black"
                fill-opacity="0.73"
              />
            </svg>
          </div>
        </div>
      </div>
      {closeNavbar && (
        <div className="absolute w-full h-screen top-0 opacity-90 z-[80]">
          <div className="bg-gray-900 h-screen fixed w-full p-4 "></div>
        </div>
      )}

      <div className="sm:block lg:hidden ">
        <div
          className={`fixed w-[250px] top-0 left-0  tr03  !z-[200] ${closeNavbar ? "" : "-translate-x-full"
            } `}
        >
          <div
            className={`absolute  mt-2  tr03 z-5  ${closeNavbar ? "ml-[255px] " : "ml-[-30px]"
              }`}
          >
            <div
              className="bg-white w-10 h-10 rounded-full pt-3"
              onClick={() => setClosNavbar(false)}
            >
              <svg
                width="13"
                height="13"
                viewBox="0 0 167 168"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                className="mx-auto  opacity-60"
              >
                <path
                  d="M95.5795 83.3674L164.663 14.2841C166.028 12.6899 166.741 10.6393 166.66 8.54198C166.579 6.44468 165.71 4.45519 164.226 2.97107C162.742 1.48695 160.752 0.617511 158.655 0.536501C156.558 0.455492 154.507 1.16888 152.913 2.5341L83.8295 71.6174L14.7462 2.45076C13.177 0.881567 11.0487 0 8.82953 0C6.61035 0 4.48206 0.881567 2.91286 2.45076C1.34366 4.01996 0.462098 6.14825 0.462098 8.36743C0.462098 10.5866 1.34366 12.7149 2.91286 14.2841L72.0795 83.3674L2.91286 152.451C2.04051 153.198 1.33201 154.117 0.831818 155.151C0.331624 156.185 0.050539 157.311 0.00620993 158.459C-0.0381192 159.606 0.15526 160.751 0.574214 161.82C0.993169 162.889 1.62865 163.861 2.44078 164.673C3.2529 165.485 4.22413 166.12 5.2935 166.539C6.36288 166.958 7.50732 167.152 8.65497 167.107C9.80263 167.063 10.9287 166.782 11.9626 166.282C12.9965 165.782 13.9158 165.073 14.6629 164.201L83.8295 95.1174L152.913 164.201C154.507 165.566 156.558 166.279 158.655 166.198C160.752 166.117 162.742 165.248 164.226 163.764C165.71 162.28 166.579 160.29 166.66 158.193C166.741 156.096 166.028 154.045 164.663 152.451L95.5795 83.3674Z"
                  fill="black"
                />
              </svg>
            </div>
          </div>
          <div className=" bg-white h-[100vh] !relative !overflow-auto tr03 shadow pt-2 rounded-tr-[60px] !z-90  ">
            <div className="text-center">
              <div className=" bg-dark rounded-full mx-auto ">
                <div className="text-center">
                  {/* <Link href="/"> */}
                  <div className="text-center mt-[15px]  w-[150px] mx-auto ">
                    <Image
                      src={logo}
                      width={500}
                      height={500}
                      alt="llc"
                      className="mx-auto"
                    />
                  </div>

                  {/* </Link> */}

                  <div className="w-[100px] h-[1px] bg-gray-300  mx-auto mt-4 opacity-50"></div>
                </div>
              </div>

              <div className="mx-3">
                <div>
                  {NavBarData.map((e, index) => (
                    <>
                      <motion.div
                        custom={index}
                        animate="visible"
                        variants={toLeft}
                        key={index}
                      >
                        {/* <Link href={e.url}> */}
                        <>
                          <div
                            className="text-center mt-2 text-sm  bg-gray-100 rounded-xl shadow-sm p-2 rtl"
                            onClick={() => {
                              if (e.children.length > 0) {
                                setResponsiveNavBarItemStep(index);

                                setActiveStepNavbar(e.id);
                              }
                            }}
                          >
                            <span>
                              {e.name}
                              <small className="absolute left-0 mx-7 ">
                                {e.children.length > 0 ? (
                                  <div>
                                    <svg
                                      width="7"
                                      height="7"
                                      viewBox="0 0 151 89"
                                      fill="none"
                                      xmlns="http://www.w3.org/2000/svg"
                                      className="mt-[6px]"
                                    >
                                      <path
                                        d="M13.0444 13.1674L75.3606 75.8506L138.044 13.5345"
                                        stroke="#424242"
                                        stroke-opacity="0.81"
                                        stroke-width="25"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                      />
                                    </svg>
                                  </div>
                                ) : (
                                  ""
                                )}
                              </small>
                            </span>
                          </div>
                        </>
                        {/* </Link>{" "} */}
                      </motion.div>

                      {responsiveNavBarItemStep === index &&
                        e.children.length > 0 &&
                        e.id == activeStepNavbar && (
                          <div>
                            <div className="my-3 ">
                              {e.children.map((s, index) => (
                                // <Link href={s.url} key={index}>
                                <div
                                  className="bg-primary-50 rounded-lg my-1 p-2 "
                                  key={index}
                                >
                                  <p className="mb-0 text-sm">{s.name}</p>
                                </div>
                                // </Link>
                              ))}
                            </div>
                          </div>
                        )}
                    </>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Navbar;