"use client";
import React, { 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 CardCategoriesMobile from "@comp/Cards/CardCategoriesMobile/page";

const Navbar = ({ theme, dataNav }) => {
  console.log(dataNav);
  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 [smallBasket, setSmallBasket] = 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"
              }  `}
            >
              <Image src={theme == 0 ? logoWhite : logoBlack} />
            </div>

            <div className="flex rtl py-5 ">
              {2 == 2 ? (
                <div className="flex">
                  <div className="bg-white py-2 px-5 rounded-xl text-sm ">
                    ورود / عضویت{" "}
                  </div>
                </div>
              ) : (
                <div className="flex">
                  <div>
                    <div
                      className="bg-white 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-white  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 className="mr-2">
                <div
                  className="bg-secondary-600 py-2 px-5 rounded-xl text-sm flex cursor-pointer "
                  onMouseEnter={() => setSmallBasket(true)}
                  onClick={() => setSmallBasket(false)}
                >
                  <p className="mb-0 text-white">سبد خرید</p>
                </div>

                {smallBasket && (
                  <div
                    className={`relative !z-[100] tr03 ${
                      smallBasket ? "opacity-100" : "opacity-0"
                    } `}
                    onMouseEnter={() => setSmallBasket(true)}
                    onMouseLeave={() => setSmallBasket(false)}
                  >
                    <div className="absolute w-[400px] bg-white  rounded-xl mt-2 max-h-[450px] overflow-auto  mr-[-310px]  scroll-1">
                      <div className="text-center p-3">
                        <p className="mb-0 text-sm  pb-3">
                          <PersianNumber
                            number={5}
                            style="text-xl font-bold text-base font-bold mx-2 !text-primary-500"
                          />
                          محصول موجود در سبد
                        </p>

                        {/* <div className="w-5/12 mx-auto h-[1px] bg-gray-200 my-3"></div> */}
                        <div>
                          <CardCategoriesMobile />
                          <CardCategoriesMobile />
                          <CardCategoriesMobile />
                          <CardCategoriesMobile />
                          <CardCategoriesMobile />
                        </div>
                      </div>

                      <div className="w-full p-3 ">
                        <div className="">
                          <p className="mb-0 text-sm p-3">
                            جمع کل :
                            <PersianNumber
                              number={2546385}
                              style="text-lg mr-2 font-bold text-gray-500"
                            />
                            <small className="mr-1 mt-[6px]">تومان</small>
                          </p>
                        </div>
                        <button className="btn btn-primary text-sm w-full py-3 rounded-3xl">
                          {" "}
                          ثبت خرید
                        </button>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>

          <div className="px-20">
            <div
              className={`w-full h-[1px]  mt-4 relative top-[-17px] rounded-full overflow-hidden opacity-10 ${
                theme == 0 ? "bg-gray-300" : "bg-gray-700"
              } `}
            ></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-white"}`}
          >
            <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-white 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>
                                <p className="mb-0  font-bold text-sm hover:text-primary-500 tr03 cursor-pointer">
                                  {e.name}
                                </p>

                                {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) => (
                                    <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>
                                  ))}
                                </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={`  p-5 flex justify-between rtl z-[50] ${
              isScrolled ? " !fixed top-0 w-full bg-white " : " relative  "
            }  `}
          >
            {" "}
            <div className="w-[90px]   z-10  ">
              <Image src={theme == 0 ? logoWhite : logoBlack} />
            </div>
            <div onClick={() => setClosNavbar(true)}>
              <svg
                width="20"
                height="30"
                viewBox="0 0 144 217"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M58.047 184.449C57.9469 180.136 56.5336 175.951 53.9858 172.422C51.4379 168.893 47.8699 166.179 43.7331 164.624C39.5962 163.069 35.0762 162.741 30.7447 163.684C26.4132 164.626 22.4647 166.796 19.3985 169.918C16.3323 173.041 14.2862 176.976 13.5188 181.226C12.7515 185.476 13.2974 189.85 15.0875 193.795C16.8776 197.74 19.8316 201.079 23.5758 203.39C27.32 205.7 31.6863 206.878 36.1226 206.776"
                  stroke="white"
                  stroke-width="18.75"
                  stroke-linecap="round"
                />
                <path
                  d="M56.2765 108.128C55.9971 96.0846 45.7282 86.5546 33.3404 86.842C20.9525 87.1294 11.1366 97.1253 11.416 109.168C11.6954 121.212 21.9642 130.742 34.3521 130.454C46.74 130.167 56.5559 120.171 56.2765 108.128Z"
                  stroke="#BE2222"
                  stroke-width="18.75"
                />
                <path
                  d="M31.5698 10.5202C36.0061 10.4173 40.3725 11.5956 44.1167 13.9061C47.8609 16.2166 50.8148 19.5556 52.605 23.5007C54.3951 27.4459 54.941 31.8201 54.1737 36.0701C53.4063 40.3202 51.3602 44.2552 48.294 47.3776C45.2278 50.5001 41.2793 52.6696 36.9478 53.612C32.6163 54.5543 28.0963 54.2271 23.9594 52.6717C19.8225 51.1163 16.2546 48.4027 13.7067 44.8738C11.1589 41.345 9.74554 37.1595 9.64549 32.8467"
                  stroke="white"
                  stroke-width="18.75"
                  stroke-linecap="round"
                />
                <path
                  d="M140.956 181.409C141.186 164.842 127.942 151.226 111.375 150.996C94.8082 150.766 81.1916 164.009 80.9615 180.576C80.7314 197.143 93.9751 210.76 110.542 210.99C127.109 211.22 140.726 197.976 140.956 181.409Z"
                  fill="white"
                />
                <path
                  d="M141.997 106.417C142.227 89.8497 128.983 76.233 112.416 76.0029C95.8492 75.7729 82.2326 89.0165 82.0025 105.583C81.7724 122.15 95.0161 135.767 111.583 135.997C128.15 136.227 141.767 122.984 141.997 106.417Z"
                  fill="white"
                />
                <path
                  d="M143.039 31.4239C143.269 14.857 130.025 1.24031 113.458 1.01025C96.8912 0.780182 83.2746 14.0238 83.0445 30.5908C82.8144 47.1577 96.0581 60.7744 112.625 61.0045C129.192 61.2345 142.809 47.9909 143.039 31.4239Z"
                  fill="white"
                />
              </svg>
            </div>
          </div>
          <div className="sm:block  lg:hidden  ">
            <div
              className={`fixed w-[250px] top-0 left-0 z-50 tr03 ${
                closeNavbar ? "" : "-translate-x-full"
              } `}
            >
              <div
                className={`absolute  mt-2  tr03 z-5  ${
                  closeNavbar ? "ml-[255px] " : "ml-[-30px]"
                }`}
              >
                <div
                  className="w-[30px] h-[30px] bg-white shadow rounded-full text-center  "
                  onClick={
                    () => setClosNavbar(false)
                    // setOpenResIgType(false) &
                    // setResponsiveNavBarItemStep(0)
                  }
                ></div>
              </div>
              <div className=" bg-white h-[100vh] relative overflow-hidden tr03 shadow pt-2  ">
                <div className="text-center">
                  <div className=" bg-dark rounded-full mx-auto ">
                    <div className="text-center">
                      <Link href="/">
                        <div className="text-center mt-5  ">
                          <Image
                            src={logo}
                            width={50}
                            height={50}
                            alt=""
                            className="mx-auto"
                          />
                        </div>
                      </Link>

                      <Link href="/counseling">
                        <div className="xs:w-full  md:w-fit text-center mt-4">
                          <button className=" btn-secondary text-sm px-7 mx-2 mt-2 ">
                            مشاوره رایگان
                          </button>
                        </div>
                      </Link>

                      <Link href="/estimate">
                        <div className="xs:w-full  md:w-fit text-center">
                          <button className=" btn-outline-primary text-sm px-7 mx-2 mt-2 ">
                            قیمت تخمین{" "}
                          </button>
                        </div>
                      </Link>

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

export default Navbar;
