import imagesPath from "@/lib/imagesPath";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";
import { FaCaretDown, FaSearch, FaCaretUp } from "react-icons/fa";
import { useDispatch, useSelector } from "react-redux";
import BannerBlock from "../banner";
import { getApiCategoryList } from "@/store/categoryList";

export default function Nav() {
  const [isNavOpen, setIsNavOpen] = useState(false);
  const [data, setData] = useState();

  const { categoryList, categoryListStatus } = useSelector(
    (state) => state.categoryList
  );

  const dispatch = useDispatch();
  useEffect(() => {
    if (!categoryListStatus) {
      dispatch(getApiCategoryList());
    }
    if (categoryListStatus) {
      setData(categoryList);
    }
  }, [dispatch]);

  useEffect(() => {
    if (categoryListStatus) {
      setData(categoryList);
    }
  }, [categoryListStatus]);

  if (!data) {
    return <></>;
  }
  return (
    <>
      <div>
        <div className="container relative hidden lg:flex items-center justify-between mx-auto  h-16 ">
          <BannerBlock area="3" className={"absolute top-16 w-40 -ml-44 "} />
          <nav>
            <ul className="flex gap-2">
              {data && data.length > 0
                ? data
                  .filter((item) => item.show_menu === true)
                  .map((item, i) => (
                    <li
                      key={i}
                      className={`${item.children ? "group relative" : ""}`}
                    >
                      <span className=" px-2 py-5 cursor-pointer flex items-center gap-2  text-base text-center text-white transition-all hover:bg-[#082d48]     ">
                        {item.children ? (
                          <>
                            {item.external ? (
                              <>
                                <Link
                                  title={item.title}
                                  href={item.external}
                                  legacyBehavior
                                >
                                  <a
                                    title={item.title}
                                    // target="_blank"
                                    rel="noopener noreferrer"
                                    className="  "
                                  >
                                    {item.title}
                                  </a>
                                </Link>
                              </>
                            ) : (
                              <>
                                {item.title}
                                <FaCaretDown className="text-xs" />
                              </>
                            )}
                          </>
                        ) : (
                          <>
                            {item.external ? (
                              <Link
                                title={item.title}
                                href={item.external}
                                legacyBehavior
                              >
                                <a
                                  title={item.title}
                                  // target="_blank"
                                  rel="noopener noreferrer"
                                  className="  "
                                >
                                  {item.title}
                                </a>
                              </Link>
                            ) : (
                              <Link
                                title={item.title}
                                href={`${process.env.DETAIL_URL}category/${item.slug}`}
                              >
                                {item.title}
                              </Link>
                            )}
                          </>
                        )}
                      </span>

                      {item?.children?.length > 0 ? (
                        <ul className="hidden group-hover:inline-flex  bg-white p-3 rounded shadow-sm absolute w-[200px] flex-col	z-10 ">
                          {item.children.map((sub_item, i) => (
                            <li
                              key={i}
                              className="w-full flex flex-col text-left"
                            >
                              {sub_item.external ? (
                                <Link
                                  title={sub_item.title}
                                  className="text-base text-black transition-all border-b-2 hover:bg-blue-50 hover:border-b-blue-600 p-3  "
                                  href={sub_item.external}
                                  legacyBehavior
                                >
                                  <a
                                    title={sub_item.title}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="text-base text-black transition-all border-b-2 hover:bg-blue-50 hover:border-b-blue-600 p-3  "
                                  >
                                    {sub_item.title}
                                  </a>
                                </Link>
                              ) : (
                                <Link
                                  title={sub_item.title}
                                  className="text-base text-black transition-all border-b-2 hover:bg-blue-50 hover:border-b-blue-600 p-3  "
                                  href={`${process.env.DETAIL_URL}category/${sub_item.slug}`}
                                >
                                  {sub_item.title}
                                </Link>
                              )}
                            </li>
                          ))}
                        </ul>
                      ) : null}
                    </li>
                  ))
                : null}
            </ul>
          </nav>
          <div className="flex gap-3 ml-4 items-center justify-between">
            <Link
              title="Search"
              href={`/search`}
              className="text-base text-white"
            >
              <FaSearch />
            </Link>
          </div>
          <BannerBlock
            area="4"
            className={"absolute right-0 top-16 w-40 -mr-44 "}
          />
        </div>
        <div className="container mx-auto lg:hidden">
          <div className="flex items-center justify-between  py-4">
            <Link title={process.env.TITLE} href={"/"}>
              <Image
                src={imagesPath.logo}
                alt={process.env.TITLE}
                width={200}
                height={40}
              />
            </Link>
            <nav>
              <section className="MOBILE-MENU flex lg:hidden">
                <div
                  className="HAMBURGER-ICON ml-4 space-y-2 cursor-pointer"
                  onClick={() => setIsNavOpen((prev) => !prev)} // toggle isNavOpen state on click
                >
                  <span className="block h-0.5 w-8 animate-pulse bg-gray-100"></span>
                  <span className="block h-0.5 w-8 animate-pulse bg-gray-100"></span>
                  <span className="block h-0.5 w-8 animate-pulse bg-gray-100"></span>
                </div>

                <div className={isNavOpen ? "showMenuNav" : "hideMenuNav"}>
                  <div
                    className="CROSS-ICON absolute top-0 right-0 px-4 py-4  cursor-pointer"
                    onClick={() => setIsNavOpen(false)} // change isNavOpen state to false to close the menu
                  >
                    <svg
                      className="h-8 w-8 text-gray-600"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <line x1="18" y1="6" x2="6" y2="18" />
                      <line x1="6" y1="6" x2="18" y2="18" />
                    </svg>
                  </div>
                  <ul className=" flex flex-col items-center justify-between min-h-[250px] ">
                    <Link
                      onClick={() => setIsNavOpen(false)}
                      className="mb-4"
                      href={"/"}
                      title={process.env.TITLE}
                    >
                      <Image
                        src={imagesPath.logo_footer}
                        alt={process.env.TITLE}
                        width={200}
                        height={40}
                      />
                    </Link>
                    {data && data.length > 0
                      ? data
                        .filter((item) => item.show_menu === true)
                        .map((item, i) => (
                          <li
                            key={i}
                            className={`${item.children ? "group relative" : ""
                              }`}
                          >
                            <span className=" px-10 py-2 cursor-pointer flex items-center gap-2  text-base text-center   transition-all hover:bg-gray-50 border-b-2 border-white hover:border-blue-300 hover:text-blue-400">
                              {item.children ? (
                                <>
                                  {item.title}
                                  <FaCaretDown className="text-xs" />
                                </>
                              ) : (
                                <>
                                  {item.external ? (
                                    <Link
                                      onClick={() => setIsNavOpen(false)}
                                      href={item.external}
                                      legacyBehavior
                                      title={item.title}
                                    >
                                      <a>{item.title}</a>
                                    </Link>
                                  ) : (
                                    <Link
                                      title={item.title}
                                      onClick={() => setIsNavOpen(false)}
                                      href={`${process.env.DETAIL_URL}category/${item.slug}`}
                                    >
                                      {item.title}
                                    </Link>
                                  )}
                                </>
                              )}
                            </span>

                            {item?.children?.length > 0 ? (
                              <ul className="hidden group-hover:inline-flex  bg-white p-3 rounded shadow-sm absolute w-[200px] flex-col	z-10 ">
                                {item.children.map((sub_item, i) => (
                                  <li
                                    key={i}
                                    className="w-full flex flex-col text-left"
                                  >
                                    {sub_item.external ? (
                                      <Link
                                        onClick={() => setIsNavOpen(false)}
                                        className="text-base transition-all border-b-2 hover:bg-blue-50 hover:border-b-blue-600 p-3  "
                                        href={sub_item.external}
                                        legacyBehavior
                                        title={sub_item.title}
                                      >
                                        <a
                                          title={sub_item.title}
                                          className="text-base transition-all border-b-2 hover:bg-blue-50 hover:border-b-blue-600 p-3  "
                                        >
                                          {sub_item.title}
                                        </a>
                                      </Link>
                                    ) : (
                                      <Link
                                        title={sub_item.title}
                                        onClick={() => setIsNavOpen(false)}
                                        className="text-base transition-all border-b-2 hover:bg-blue-50 hover:border-b-blue-600 p-3  "
                                        href={`${process.env.DETAIL_URL}category/${sub_item.slug}`}
                                      >
                                        {sub_item.title}
                                      </Link>
                                    )}
                                  </li>
                                ))}
                              </ul>
                            ) : null}
                          </li>
                        ))
                      : null}
                    <li>
                      <Link
                        title="Search"
                        onClick={() => setIsNavOpen(false)}
                        href={`/search`}
                        className="flex border px-3 py-1 gap-2 items-center text-base  "
                      >
                        Search <FaSearch />
                      </Link>
                    </li>
                  </ul>
                </div>
              </section>
            </nav>
            <style>{`
              .hideMenuNav {
                display: none;
              }
              .showMenuNav {
                display: block;
                position: absolute;
                width: 100%;
                height: 100vh;
                top: 0;
                left: 0;
                background: white;
                z-index: 10;
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                align-items: center;
              }
            `}</style>
          </div>
        </div>
      </div>
    </>
  );
}
