"use client";
import AppContext from "@ctx/AppContext";
import Image from "next/image";
import Link from "next/link";
import { useContext, useState } from "react";
import logo from "../../../public/images/logo.png";
import Navbar from "../page";
import SearchSideBar from "@comp/Category/Mobile/Component/SearchSideBar/page";
import ResultSearchBar from "../ResultSearchBar/page";

const SideBarNavBarMobile = () => {
  const CTX = useContext(AppContext);
  const [firstChild, setFirstChild] = useState([]);
  const [firstChildIndex, setFirstChildIndex] = useState(-1);

  const dataNav = CTX?.state?.navData?.filter(
    (item) => item.name !== "بهداشت خانه و آشپرخانه"
  );
  const isSearched = CTX.state.isSearched;
  const searchResultCategoryData = CTX.state.searchResultData.categories;
  const searchResultProductData = CTX.state.searchResultData.products;

  const closeNavbar = CTX.state.closeNavbar;

  return (
    <>
      <div className="sm:block  lg:hidden  ">
        <div
          className={`fixed w-full top-0 right-0 z-50 tr03  ${
            closeNavbar ? "" : "translate-x-full"
          } `}
        >
          <div
            className={`absolute  mt-2  tr03 z-50   ${closeNavbar ? " " : ""}`}
          >
            <div
              className="rounded-full text-center m-2  "
              onClick={() => {
                CTX.setCloseNavbar(false);
                setFirstChildIndex(-1);
              }}
            >
              <svg
                width="15"
                height="15"
                viewBox="0 0 88 151"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                className="mx-auto opacity-70"
              >
                <path
                  d="M12.9525 138.35L75.249 75.6471L12.5462 13.3506"
                  stroke="black"
                  stroke-opacity="0.81"
                  stroke-width="25"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </div>
          </div>
          <div className=" bg-white h-[100vh] relative  tr03 shadow pt-2 overflow-auto  ">
            <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={60}
                        height={60}
                        alt="وسمه"
                        className="mx-auto"
                      />
                    </div>
                  </Link>
                  <SearchSideBar />
                  <div className="w-[100px] h-[1px] bg-gray-300  mx-auto mt-4 opacity-50"></div>

                  {isSearched ? (
                    <div className="rtl p-5">
                      <ResultSearchBar
                        searchResultProductData={searchResultProductData}
                        searchResultCategoryData={searchResultCategoryData}
                      />
                    </div>
                  ) : (
                    <div>
                      <ul className="text-right px-5">
                        {dataNav?.map((e, index) => (
                          <li
                            onClick={() => {
                              setFirstChild(dataNav[index].children);
                              setFirstChildIndex(index);
                            }}
                            key={index}
                          >
                            <div className="py-3 flex justify-between rtl bg-gray-50 px-1 rounded-lg my-1">
                              <p className="text-sm mb-0 font-bold ">
                                {e.name}
                              </p>

                              <div>
                                <svg
                                  width="12"
                                  height="12"
                                  viewBox="0 0 88 151"
                                  fill="none"
                                  xmlns="http://www.w3.org/2000/svg"
                                  className="mx-auto opacity-70 rotate-180 mt-1"
                                >
                                  <path
                                    d="M12.9525 138.35L75.249 75.6471L12.5462 13.3506"
                                    stroke="black"
                                    stroke-opacity="0.81"
                                    stroke-width="25"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                  />
                                </svg>
                              </div>
                            </div>

                            {firstChildIndex == index && (
                              <>
                                <ul>
                                  <li>
                                    <Link
                                      href={`/categories/${e.id}/${e.name
                                        .split(" ")
                                        .join("-")}`}
                                      onClick={() => CTX.setCloseNavbar(false)}
                                    >
                                      <p className="mb-0 text-sm py-3 px-1 text-gray-700">
                                        همه موارد
                                      </p>
                                    </Link>
                                  </li>{" "}
                                  {firstChild.map((e, index) => (
                                    <li key={index}>
                                      <Link
                                        href={`/categories/${e.id}/${e.name
                                          .split(" ")
                                          .join("-")}`}
                                        onClick={() =>
                                          CTX.setCloseNavbar(false)
                                        }
                                      >
                                        <div className="py-3 flex justify-between rtl  px-1 rounded-lg my-1 text-gray-700">
                                          <p className="mb-0 text-sm">
                                            {e.name}
                                          </p>
                                        </div>
                                      </Link>
                                    </li>
                                  ))}
                                </ul>
                              </>
                            )}
                          </li>
                        ))}
                      </ul>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default SideBarNavBarMobile;