"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 AppContext from "../../Contexts/AppContext";

import logo from "@img/logo.png";

const NavbarTransparent = () => {
  const router = useRouter();

  const CTX = useContext(AppContext);
  const openNavBarServices = CTX.state.openNavBarServices;
  const NavBarData = CTX.state.navData;

  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 > 200);
    };

    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 px-20 "
        } `}
      >
        <nav
          className={`bg-white  rtl flex justify-between w-full  pr-20  ${
            isScrolled ? " " : " rounded-2xl"
          }`}
        >
          <div className="w-9/12 flex ">
            <div className="w-[50px] mt-[10px]  ">
              <Image
                src={logo}
                width={500}
                height={500}
                alt="حامیان عدالت"
                className="mx-auto mt-3"
              />
            </div>
            {NavBarData.map((e, index) => (
              <>
                <div
                  key={index}
                  className={` mx-2 px-4 w-fit text-sm  p-7 ${
                    1
                      ? "bg-visa2-200  rounded-full !text-white text-shadow pb-1"
                      : ""
                  } `}
                  onMouseEnter={() => {
                    // setHoverItemNavbar(index);
                    setActiveStepNavbar(e.id);
                  }}
                  onMouseLeave={() => {
                    // setHoverItemNavbar(-1);
                    setActiveStepNavbar(null);
                  }}
                  // onClick={() => context.setOpenNavBarServices(false)}
                >
                  <Link href={e.url} className="!text-black">
                    {e.title}
                    {e.children.length > 0 && ""}
                  </Link>

                  {e.children.length > 0 && e.id == activeStepNavbar && (
                    <div
                      className="relative flex justify-center"
                      // onMouseLeave={() => {
                      //   setHoverItemNavbar(-1);
                      // }}
                    >
                      <div class="absolute  text-sm z-40  w-[204px]  top-[17px] bg-gray-200 rounded-[26px] p-3 ">
                        <svg
                          class="absolute w-20 h-7 -top-[7px] inset-x-0 mx-auto"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 740 155.61"
                        >
                          <path
                            fill="white"
                            d="M532.54 85.81c69.58,-54.09 138.74,-82.63 207.46,-85.62l-740 0c73.71,3.21 147.93,35.81 222.63,97.82 28.75,23.85 45.98,38.3 83.91,49.54 20.26,6.01 41.42,8.74 63.46,8.18 28.55,0.73 55.61,-4.06 81.17,-14.35 36.28,-14.61 51.98,-32.73 81.37,-55.57z"
                          ></path>
                        </svg>
                        <span class="absolute w-[14px] h-[14px] rounded-full  block bg-gray-200 -top-[6px] inset-x-0 mx-auto"></span>

                        <div>
                          <ul>
                            {e.children.map((s, index) => (
                              <li key={index}>
                                <Link href={s.url}>
                                  <div className="flex py-2 hover:bg-sky-50 p-2 rounded-2xl cursor-pointer ">
                                    <div className="w-3 h-3 rounded-full bg-primary-900 ml-1 mt-1"></div>
                                    <p className="mb-0 text-black text-sm ">
                                      {s.title}
                                    </p>
                                  </div>
                                </Link>
                              </li>
                            ))}
                          </ul>
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              </>
            ))}
          </div>

          <div className="w-3/12   ltr p-4 ">
            <div className=" mx-2 w-fit px-4  text-sm bg-secondary-800  p-3 rounded-2xl">
              <a
                href={`tel:${process.env.NEXT_PUBLIC_PHONE_NUMBER}`}
                className="!text-black font-bold"
              >
                پشتیبانی سریع
              </a>
            </div>
          </div>
        </nav>
      </div>

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

      <div
        className={`sm:block lg:hidden ${
          isScrolled & !closeNavbar ? "fixed top-0 z-[100] w-full" : " pt-2"
        }`}
      >
        <div
          className={`bg-white 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-[50px] md:w-[100px]  mt-[12px] ">
                <Image
                  src={logo}
                  width={500}
                  height={500}
                  alt="حامیان عدالت"
                  className="mx-auto"
                />
              </div>
              <h4 className="mr-2 font-bold mt-4 "> حامیان عدالت </h4>
            </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]  ">
                      <Image
                        src={logo}
                        width={50}
                        height={50}
                        alt="حامیان عدالت"
                        className="mx-auto"
                      />
                    </div>
                    <h4 className="mt-2 font-bold">حامیان عدالت</h4>
                  </Link>

                  <a href={`tel:${process.env.NEXT_PUBLIC_PHONE_NUMBER}`}>
                    <div className="xs:w-full  md:w-fit text-center mt-4">
                      <div className=" bg-secondary-600  p-3 rounded-3xl text-white w-fit mx-auto text-sm px-7 mx-2 mt-2 ">
                        مشاوره تخصصی فوری{" "}
                      </div>
                    </div>
                  </a>

                  <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.title}
                                <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-100 rounded-lg my-1 p-2 ">
                                    <p className="mb-0 text-sm">{s.title}</p>
                                  </div>
                                </Link>
                              ))}
                            </div>
                          </div>
                        )}
                    </>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default NavbarTransparent;
