"use client";
import React, { useContext, useEffect, useState } from "react";
import Image from "next/image";
import logo from "../../public/images/logo.png";
import logoWhite from "../../public/images/logo-white.png";
import logoBlack from "../../public/images/logo.png";
import divider from "../../public/images/divider.png";
import cover from "../../public/images/cover.png";
import { Menu } from "@headlessui/react";

import { motion } from "framer-motion";
import Link from "next/link";
import PersianNumber from "plugins/PersianNumber";
import CartNavbar from "./CartNavbar/page";
import AppContext from "@ctx/AppContext";
import BottomSheetCart from "plugins/bottomSheet/BottomSheetCart";
import { BottomSheet } from "react-spring-bottom-sheet";
import SearchSideBar from "@comp/Category/Mobile/Component/SearchSideBar/page";

const Navbar = ({ theme }) => {
  const [open, setOpen] = useState(false);

  const CTX = useContext(AppContext);
  const dataNav = CTX.state.navData;
  const cart = CTX.state.cart;

  const [navItemHover, setNavItemHover] = useState(null);
  const [isDesktop, setIsDesktop] = useState(null);
  const [closeNavbar, setClosNavbar] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);
  const [smallDashboard, setSmallDashboard] = useState(false);

  const handleItemNavber = (index) => {
    setNavItemHover(index);
    console.log("index", index);
  };

  useEffect(() => {
    const handleResize = () => {
      setIsDesktop(window.innerWidth > 1000); // You can adjust the width threshold as needed
    };

    // Set initial window size
    handleResize();

    // Add event listener to handle window resize
    window.addEventListener("resize", handleResize);

    // Remove event listener on component unmount
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

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

    window.addEventListener("scroll", handleScroll);

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

  return (
    <>
      {isDesktop && (
        <div className=" pt-10  tr03">
          <div className="flex justify-between rtl px-20  ">
            <div
              className={`w-[100px] mt-0 py-5 border-b-[2px] relative  z-10 ${
                theme == 0 ? "border-white" : "border-black"
              }  `}
            >
              <Link href={"/"}>
                <Image src={theme == 0 ? logoWhite : logoBlack} />
              </Link>
            </div>

            <div className="flex rtl py-5 ">
              {1 == 2 ? (
                <div className="flex">
                  <div className="bg-gray-100 py-2 px-5 rounded-xl text-sm ">
                    ورود / عضویت{" "}
                  </div>
                </div>
              ) : (
                <div className="flex">
                  <div>
                    <div
                      className="bg-gray-100 py-2 px-5 rounded-xl text-sm flex cursor-pointer "
                      onClick={() => setSmallDashboard(!smallDashboard)}
                    >
                      <p className="mb-0">حسین معصومی پور</p>
                      <div className="w-[20px] h-[20px] rounded-full bg-primary-500 mr-2"></div>
                    </div>

                    {smallDashboard && (
                      <div
                        className={`relative !z-[100] tr03 ${
                          smallDashboard ? "opacity-100" : "opacity-0"
                        } `}
                        onMouseEnter={() => setSmallDashboard(true)}
                        onMouseLeave={() => setSmallDashboard(false)}
                      >
                        <div className="absolute w-[270px] bg-gray-100  rounded-xl mt-2  mr-[-87px] overflow-hidden">
                          <div>
                            <ul className="p-2 ">
                              <li className="group cursor-pointer">
                                <div className="flex justify-between  p-2  rounded-full group-hover:bg-primary-200 tr03">
                                  <p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
                                    داشبورد
                                  </p>
                                  <div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
                                </div>
                              </li>

                              <li className="group cursor-pointer">
                                <div className="flex justify-between  p-2  rounded-full group-hover:bg-primary-200 tr03">
                                  <p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
                                    سفارشات
                                  </p>
                                  <div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
                                </div>
                              </li>

                              <li className="group cursor-pointer">
                                <div className="flex justify-between  p-2  rounded-full group-hover:bg-primary-200 tr03">
                                  <p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
                                    پیگیری سفارش
                                  </p>
                                  <div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
                                </div>
                              </li>

                              <li className="group cursor-pointer">
                                <div className="flex justify-between  p-2  rounded-full group-hover:bg-primary-200 tr03">
                                  <p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
                                    پشتیبانی{" "}
                                  </p>
                                  <div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
                                </div>
                              </li>

                              <li className="flex justify-between p-2 rounded-full  group hover:bg-red-200 tr03 cursor-pointer">
                                <p className="mb-0 text-sm text-red-500 group-hover: ">
                                  خروج{" "}
                                </p>
                                <div className="w-[20px] h-[20px] rounded-full bg-red-200 group-hover:bg-red-500 tr03 "></div>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              )}

              <CartNavbar />
            </div>
          </div>

          <div className="px-20">
            <div
              className={`w-full h-[2px]  mt-4 relative top-[-17px] rounded-full overflow-hidden opacity-10 ${
                theme == 0 ? "bg-gray-300" : "bg-gray-500"
              } `}
            ></div>
          </div>

          <div
            className={`flex justify-center rtl  pt-3 tr03 z-50 tr03  ${
              navItemHover != null ? "bg-navbar rounded-xl " : "bg-transparent"
            }${
              isScrolled
                ? " !fixed top-0 w-full bg-white "
                : " relative top-[-18px] "
            }  
              
            ${theme == 0 ? "" : "!bg-gray-100"}`}
          >
            <div className="flex rtl">
              {dataNav?.map((e, index) => (
                <p
                  className={`mb-0 pb-4 px-2 tr03 cursor-pointer    ${
                    navItemHover == index
                      ? "font-bold border-b-[3px] border-gray-400 text-black "
                      : "border-b-[3px] border-transparent "
                  }
        ${theme == 0 ? "text-gray-300" : "text-gray-900"}  
         ${theme == 0 && isScrolled ? "text-gray-900" : ""}`}
                  onMouseEnter={() => handleItemNavber(index)}
                  onMouseLeave={() => setNavItemHover(null)}
                >
                  {e.name}{" "}
                </p>
              ))}
            </div>

            <div className="bg-red-600 mb-4 px-4 rounded-full">
              <p className="mb-0 text-white">بمب امروز </p>
            </div>
          </div>

          <div
            className="flex justify-center  "
            onMouseEnter={() => setNavItemHover(navItemHover)}
            onMouseLeave={() => setNavItemHover(null)}
          >
            <div
              className={`  w-3/4 mr-0 z-50  ${
                isScrolled ? "fixed top-10 mt-[29px]" : "relative top-[-3px]"
              } `}
            >
              <div
                className={`flex ${
                  navItemHover != null ? " opacity-100" : "hidden opacity-0"
                }`}
              >
                <div className="w-[60px] absolute left-0 rotate-180 ml-[-60px] mt-[-15px] ">
                  <Image src={divider} />
                </div>

                <div
                  className={`block absolute w-full bg-gray-100 bottom-[-435px] h-[450px] p-4 rounded-b-2xl tr03 z-50 over`}
                >
                  <div className="flex  rtl">
                    <div className=" mx-2 p-5 w-full ">
                      <ul className="flex flex-col flex-wrap max-h-96 list-none ">
                        {navItemHover != null &&
                          dataNav &&
                          dataNav[navItemHover].children.map((e) => (
                            <li className=" my-2">
                              <div className="flex">
                                <div className="w-[10px] h-[10px] rounded-full bg-primary-500 mt-1 mx-2"></div>
                                <Link href={`/categories/${e.id}`}>
                                  <p className="mb-0  font-bold text-sm hover:text-primary-500 tr03 cursor-pointer">
                                    {e.name}
                                  </p>
                                </Link>

                                {e.children.length > 0 && (
                                  <div>
                                    <svg
                                      width="10"
                                      height="10"
                                      viewBox="0 0 923 1697"
                                      fill="none"
                                      xmlns="http://www.w3.org/2000/svg"
                                      className="mx-1 mt-[3px]"
                                    >
                                      <path
                                        d="M714 209L209.293 848.115L714 1487.23"
                                        stroke="blue"
                                        stroke-width="200"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                      />
                                    </svg>
                                  </div>
                                )}
                              </div>

                              {/* ======hear==== */}
                              {e.children && e.children.length > 0 && (
                                <div>
                                  {e.children.map((child) => (
                                    <Link href={`/categories/${child.id}`}>
                                      <p
                                        key={child.id}
                                        className="mb-0 mt-2 text-[14px] mr-2 hover:bg-primary-400 hover:text-white w-fit rounded-full px-2 tr03 cursor-pointer"
                                      >
                                        {child.name}
                                      </p>
                                    </Link>
                                  ))}
                                </div>
                              )}
                            </li>
                          ))}
                      </ul>
                    </div>

                    <div className=" mx-2 p-5 w-10/12">
                      <div className=" mx-2 h-[300px] w-full bg-red-900 rounded-[60px] overflow-hidden relative border-[3px] border-gray-50">
                        <div className="absolute">
                          <Image
                            src={cover}
                            className="h-[300px] object-cover brightness-50"
                          />
                        </div>

                        <div className=" mt-[90px] relative">
                          <div className="flex justify-center">
                            <div className="w-[50px] h-[50px] rounded-full bg-white mt-5 ">
                              <svg
                                width="20"
                                height="20"
                                viewBox="0 0 356 357"
                                fill="none"
                                xmlns="http://www.w3.org/2000/svg"
                                className="mx-auto mt-4 mr-3 opacity-30"
                              >
                                <path
                                  d="M0 1.17188L1.17509 356.17L354.586 177.499L0 1.17188Z"
                                  fill="black"
                                />
                              </svg>
                            </div>
                          </div>
                          <p className="mb-0 w-full text-white bg-navbar mt-3 text-center">
                            چرا آرایشی وسمه ؟
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="w-[60px] absolute right-0 rotate-90 mr-[-60px] mt-[-15px] ">
                  <Image src={divider} />
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {!isDesktop && (
        <>
          <div
            className={`   flex justify-between rtl z-[50] rounded-bl-3xl ${
              isScrolled
                ? " !fixed top-0 w-full bg-gray-100 p-5"
                : " relative px-5 pt-5 "
            }  `}
          >
            {" "}
            <div className="w-[70px] mt-[6px]  z-10  ">
              {isScrolled ? (
                <Image src={theme == 0 ? logoBlack : logoBlack} />
              ) : (
                <Image src={theme == 0 ? logoWhite : logoBlack} />
              )}
            </div>
            <div className="flex">
              <div className="flex">
                {1 == 2 ? (
                  <div className="flex">
                    <div className="bg-gray-100 py-2 px-3 rounded-xl text-sm ">
                      ورود / عضویت{" "}
                    </div>
                  </div>
                ) : (
                  <div className="flex">
                    <div>
                      <div
                        className="bg-gray-100 py-2 px-3 rounded-xl text-sm flex cursor-pointer "
                        onClick={() => setSmallDashboard(!smallDashboard)}
                      >
                        <p className="mb-0 text-sm">حسین معصومی پور</p>
                      </div>

                      {smallDashboard && (
                        <div
                          className={`relative !z-[100] tr03 ${
                            smallDashboard ? "opacity-100" : "opacity-0"
                          } `}
                          onMouseEnter={() => setSmallDashboard(true)}
                          onMouseLeave={() => setSmallDashboard(false)}
                        >
                          <div className="absolute w-[270px] bg-gray-100  rounded-xl mt-2  mr-[-87px] overflow-hidden">
                            <div>
                              <ul className="p-2 ">
                                <li className="group cursor-pointer">
                                  <div className="flex justify-between  p-2  rounded-full group-hover:bg-primary-200 tr03">
                                    <p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
                                      داشبورد
                                    </p>
                                    <div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
                                  </div>
                                </li>

                                <li className="group cursor-pointer">
                                  <div className="flex justify-between  p-2  rounded-full group-hover:bg-primary-200 tr03">
                                    <p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
                                      سفارشات
                                    </p>
                                    <div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
                                  </div>
                                </li>

                                <li className="group cursor-pointer">
                                  <div className="flex justify-between  p-2  rounded-full group-hover:bg-primary-200 tr03">
                                    <p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
                                      پیگیری سفارش
                                    </p>
                                    <div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
                                  </div>
                                </li>

                                <li className="group cursor-pointer">
                                  <div className="flex justify-between  p-2  rounded-full group-hover:bg-primary-200 tr03">
                                    <p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
                                      پشتیبانی{" "}
                                    </p>
                                    <div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
                                  </div>
                                </li>

                                <li className="flex justify-between p-2 rounded-full  group hover:bg-red-200 tr03 cursor-pointer">
                                  <p className="mb-0 text-sm text-red-500 group-hover: ">
                                    خروج{" "}
                                  </p>
                                  <div className="w-[20px] h-[20px] rounded-full bg-red-200 group-hover:bg-red-500 tr03 "></div>
                                </li>
                              </ul>
                            </div>
                          </div>
                        </div>
                      )}
                    </div>
                  </div>
                )}
              </div>

              <div
                className="mx-2 mt-2"
                onClick={() => CTX.setBottomSheetCartOpen(true)}
              >
                <div className="absolute mt-[-16px] mr-[6px] ">
                  {cart?.length > 0 && (
                    <div className="">
                      <PersianNumber
                        number={cart?.length}
                        style={`!text-[10px] text-primary-900 font-bold ${
                          theme == 1
                            ? "text-primary-500"
                            : isScrolled
                            ? "text-primary-500"
                            : "text-white"
                        }`}
                      />
                    </div>
                  )}
                </div>
                <svg
                  width="20"
                  height="20"
                  viewBox="0 0 248 232"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  className="opacity-80"
                >
                  <path
                    d="M18.4371 138.212C9.46208 96.3 4.96208 75.3375 16.2246 61.425C27.4746 47.5 48.9121 47.5 91.7746 47.5H156.225C199.1 47.5 220.512 47.5 231.775 61.425C243.025 75.35 238.537 96.3 229.562 138.212L224.2 163.212C218.112 191.625 215.075 205.825 204.762 214.163C194.45 222.5 179.925 222.5 150.875 222.5H97.1246C68.0746 222.5 53.5496 222.5 43.2496 214.163C32.9246 205.825 29.8746 191.625 23.7996 163.212L18.4371 138.212Z"
                    stroke={
                      isScrolled ? "black" : theme == 1 ? "black" : "white"
                    }
                    stroke-width="18.75"
                  />
                  <path
                    opacity="0.6"
                    d="M199 85L161.5 10M49 85L86.5 10"
                    stroke={
                      isScrolled ? "black" : theme == 1 ? "black" : "white"
                    }
                    stroke-width="18.75"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                </svg>
              </div>
            </div>
          </div>
          <SearchSideBar />
          <BottomSheetCart />
        </>
      )}
    </>
  );
};

export default Navbar;