'use client'

import Image from 'next/image';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import React , {useState,useEffect} from 'react'
export const menuList = [
    {
      title: "Bread Agency",
      links:  [
        {
          label: "Home",
          href: "/",
        },
        {
          label: "Performance",
          href: "/performance",
        },
        {
          label: "Content",
          href: "/content",
        },
        // {
        //   label: "Doc landing",
        //   href: "/doc-landing",
        // },
        // {
        //   label: "Product landing",
        //   href: "/product-landing",
        // },
      ],
    },

  ];
export default function MobileMenuTwo() {
    const [showMenu, setShowMenu] = useState(false);
    const [menuNesting, setMenuNesting] = useState([]);
    const [menuItem, setMenuItem] = useState("");
    const [submenu, setSubmenu] = useState("");
    const pathname = usePathname();
  
    useEffect(() => {
      menuList.forEach((elm) => {
        elm?.links?.forEach((elm2) => {
          if (elm2.href == pathname) {
            setMenuItem(elm.title);
          } else {
            elm2?.links?.map((elm3) => {
              if (elm3.href == pathname) {
                setMenuItem(elm.title);
                setSubmenu(elm2.title);
              }
            });
          }
        });
      });
    }, []);
  return (
    <>
    <div className="mobileMenu text-dark-1">
            {menuList.map((elm, i) => {
              if (elm.title) {
                return (
                  <div key={i} className="submenuOne">
                    <div
                      className="title title1"
                      onClick={() =>
                        setMenuNesting((pre) =>
                          pre[0] == elm.title ? [] : [elm.title],
                        )
                      }
                    >
                      <span
                        className={
                          elm.title == menuItem ? "activeMenu" : "inActiveMenu"
                        }
                      >
                        {elm.title}
                      </span>
                      <Image alt='chevron'
                      style={{fill:'fff'}}
                                width={15} height={15}
                                  src={
                                    menuNesting[0] == elm.title
                                      ? "/images/menusicon/chevron-down.svg"
                                      : "/images/menusicon/chevron-right.svg"
                                  }
                                />
                    </div>

                    {elm.links &&
                      elm.links.map((itm, index) => (
                        <div
                          key={index}
                          className={
                            menuNesting[0] == elm.title
                              ? "toggle active"
                              : "toggle"
                          }
                        >
                          {itm.href && (
                            <Link
                              key={i}
                              className={
                                pathname == itm.href
                                  ? "activeMenu link"
                                  : "link inActiveMenu"
                              }
                              href={itm.href}
                            >
                              {itm.label}
                            </Link>
                          )}

                          {itm.links && (
                            <div className="submenuTwo">
                              <div
                                className="title"
                                onClick={() =>
                                  setMenuNesting((pre) =>
                                    pre[1] == itm.title
                                      ? [pre[0]]
                                      : [pre[0], itm.title],
                                  )
                                }
                              >
                                <span
                                  className={
                                    itm.title == submenu
                                      ? "activeMenu"
                                      : "inActiveMenu"
                                  }
                                >
                                  {itm.title && itm.title}
                                </span>
                                <Image alt='chevron'
                                width={22} height={22}
                                style={{fill:'fff'}}
                                  src={
                                    menuNesting[1] == itm.title
                                      ? "/images/menusicon/dash.svg"
                                      : "/images/menusicon/plus.svg"
                                  }
                                />
                              </div>
                              <div
                                className={
                                  menuNesting[1] == itm.title
                                    ? "toggle active"
                                    : "toggle"
                                }
                              >
                                {itm.links &&
                                  itm.links.map((itm2, index3) => (
                                    <Link
                                      key={index3}
                                      className={
                                        pathname == itm2.href
                                          ? "activeMenu link"
                                          : "link inActiveMenu"
                                      }
                                      href={itm2.href}
                                    >
                                      {itm2.label}
                                    </Link>
                                  ))}
                              </div>
                            </div>
                          )}
                        </div>
                      ))}
                  </div>
                );
              }
            })}
          </div>
    </>
  )
    
    
          

}