"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";

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

  const dataNav = CTX.state.navData;

  console.log(firstChild);

  const closeNavbar = CTX.state.closeNavbar;
  console.log("closeNavbar", 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>
                  <div className="flex justify-center mt-5 px-3">
                    <button className="btn btn-outline-primary  rounded-full mx-1  text-sm      ">
                      عیدی وسمه چی میشه؟
                    </button>
                    <button className="btn bg-red-700 text-white rounded-full mx-1  text-sm ">
                      بمب امروز{" "}
                    </button>
                  </div>
                  <div className="w-[100px] h-[1px] bg-gray-300  mx-auto mt-4 opacity-50"></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}`}
                                    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}`}
                                      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;