'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: "Project Management",
          href: "/project-management",
        },
        {
          label: "Customer Support",
          href: "/customer-support",
        },
        {
          label: "Doc landing",
          href: "/doc-landing",
        },
        {
          label: "Product landing",
          href: "/product-landing",
        },
      ],
    },
    // {
    //   title: "Pages",
    //   links: [
    //     {
    //       title: "Pricing",
    //       links: [
    //         {
    //           label: "Customer Support",
    //           href: "/pricing-cs",
    //         },
    //         {
    //           label: "Event Organiser",
    //           href: "/pricing-eo",
    //         },
    //         {
    //           label: "Project Management",
    //           href: "/pricing-pm",
    //         },
    //       ]
    //     },
    //     {
    //       title: "About Us",
    //
    //       links:[
    //         {
    //           label: "Customer Support",
    //           href: "/about-cs",
    //         },
    //         {
    //           label: "Event Organiser",
    //           href: "/about-eo",
    //         },
    //         {
    //           label: "Project Management",
    //           href: "/about-pm",
    //         },
    //         {
    //           label: "Documentation",
    //           href: "/about-doc",
    //         },
    //       ],
    //     },
    //     {
    //       title: "Contact",
    //       links: [
    //         {
    //           label: "Custom Support",
    //           href: "/contact-cs",
    //         },
    //         {
    //           label: "Event Organizer",
    //           href: "/contact-eo",
    //         },
    //         {
    //           label: "Project Management",
    //           href: "/contact-pm",
    //         },
    //         {
    //           label: "Documentation",
    //           href: "/contact-doc",
    //         },
    //       ],
    //     },
    //     {
    //       title: "Teams",
    //       links: [
    //         {
    //           label: "Team Version 01",
    //           href: "/team-1",
    //         },
    //         {
    //           label: "Team Version 02",
    //           href: "/team-2",
    //         },
    //         {
    //           label: "Team Version 03",
    //           href: "/team-3",
    //         },
    //         {
    //           label: "Team Version 04",
    //           href: "/team-4",
    //         },
    //         {
    //           label: "Team Version 05",
    //           href: "/team-5",
    //         },
    //         {
    //           label: "Team Version 06",
    //           href: "/team-6",
    //         },
    //         {
    //           label: "Team Details",
    //           href: "/teams/1",
    //         },
    //         {
    //           label: "Team Details Slider",
    //           href: "/team-details-v2/1",
    //         },
    //       ],
    //     },
    //     { href: "/faq", label: "Faq" },
    //     { href: "/faqs/2", label: "Faq Details" },
    //
    //
    //   ],
    // },
    // {
    //   title: "Features",
    //   links: [
    //     {
    //       title: "Services",
    //       links: [
    //         {
    //           label: "Service Version 01",
    //           href: "/service-v1",
    //         },
    //         {
    //           label: "Service Version 02",
    //           href: "/service-v2",
    //         },
    //         {
    //           label: "Service Version 03",
    //           href: "/service-v3",
    //         },
    //         {
    //           label: "Service Version 04",
    //           href: "/service-v4",
    //         },
    //         {
    //           label: "Service Details",
    //           href: "/services/3",
    //         },
    //       ]
    //     },
    //     {
    //       title: "Miscellaneous",
    //       links: [
    //         {
    //           label: "Terms & Condition",
    //           href: "/terms-conditions",
    //         },
    //         {
    //           label: "Login",
    //           href: "/login",
    //         },
    //         {
    //           label: "Signup",
    //           href: "/signup",
    //         },
    //         {
    //           label: "404",
    //           href: "/not-found",
    //         },
    //       ]
    //     },
    //     { href: "/solution-management", label: "Our Solution" },
    //     { href: "/product-customer-support", label: "Product Features" },
    //     { href: "/features-customer-support", label: "Our Features" },
    //
    //   ],
    // },
    // {
    //   title: "Portfolio",
    //   links: [
    //     {
    //       label: "Classic Style",
    //       href: "/classic-style",
    //     },
    //     {
    //       label: "Grid 2 Columns",
    //       href: "/grid-two-col",
    //     },
    //     {
    //       label: "Grid 3 Columns",
    //       href: "/grid-three-col",
    //     },
    //     {
    //       label: "Gallery Slider",
    //       href: "/gallery-slider",
    //     },
    //     {
    //       label: "Grid Single",
    //       href: "/grid-single",
    //     },
    //     {
    //       label: "Classic Details",
    //       href: "/portfolios/2",
    //     },
    //   ],
    // },
    // {
    //   title: "Blogs",
    //   links: [
    //     {
    //       label: "Blog Version 01",
    //       href: "/blog-v1",
    //     },
    //     {
    //       label: "Blog Version 02",
    //       href: "/blog-v2",
    //     },
    //     {
    //       label: "Blog Version 03",
    //       href: "/blog-v3",
    //     },
    //     {
    //       label: "Blog Version 04",
    //       href: "/blog-v4",
    //     },
    //     {
    //       label: "Blog Version 05",
    //       href: "/blog-v5",
    //     },
    //     {
    //       label: "Blog Version 06",
    //       href: "/blog-v6",
    //     },
    //     {
    //       label: "Blog Details",
    //       href: "/blogs/3",
    //     },
    //   ],
    // },
    // {
    //   title: "Docs",
    //   links: [
    //     {
    //       label: "Full Width",
    //       href: "/doc-full-width",
    //     },
    //     {
    //       label: "Full Width Banner",
    //       href: "/doc-full-width-banner",
    //     },
    //     {
    //       label: "Doc Box",
    //       href: "/doc-box",
    //     },
    //     {
    //       label: "Doc Box With Banner",
    //       href: "/doc-box-with-banner",
    //     },
    //     {
    //       label: "Changelog",
    //       href: "/changelog",
    //     },
    //   ],
    // },
  ];
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>
    </>
  )
    
    
          

}