import styles from "./Menu.module.less";
import clsx from "clsx";
import { useEffect, useState } from "react";

import { useParams, useLocation, useNavigate } from "react-router-dom";

export default function Menu() {
  let navigate = useNavigate();
  const location = useLocation();
  const [active, setActive] = useState<string>("");
  useEffect(() => {
    initMenu();
  }, []);

  async function initMenu() {
    function getActive(arr) {
      arr.forEach(item => {
        if(item.hasOwnProperty('path') && (item.path.includes(location.pathname) || item.path === location.pathname ) && !active) {
          setActive(item.label); 
        }
        if(item.hasOwnProperty('child') && !active) {
          getActive(item.child)
        }
      })
    }
    getActive(menuConfig)
  }
  const menuConfig = [
    {
      label: "常用",
      child: [
        // {
        //   label: "文件整理",
        //   path: "/file-sort",
        // },
        // {
        //   label: "文件清理",
        //   path: "/file-clear",
        // },
        {
          label: "文件管理",
          path: "/",
        },
        {
          label: "chat",
          path: "/chat",
        },
        {
          label: "Bookmark管理器",
          path: "/bookmarksList",
        },
      ],
    },
    {
      label: "系统",
      child: [
        {
          label: "字符查询",
        },
        {
          label: "设置",
          path: "/setting",
        },
        {
          label: "关于我们",
          path: "/about",
        },
      ],
    },
  ];
  function menuHandle(path: string, label: string) {
    setActive(label);
    navigate(path);
  }
  return (
    <div className={clsx(styles.box, styles.parent)}>
      <div className={styles.logoBox}>Logo:</div>
      {menuConfig.map((item) => (
        <div className={styles.menuBox} key={item.label}>
          <div className={styles.label}>{item.label}</div>
          <div className={styles.menuChildBox}>
            {item?.child?.length > 0 &&
              item?.child.map((childItem) => (
                <div
                  key={childItem.label}
                  className={clsx(
                    styles.childItemLabel,
                    active === childItem.label && styles.active,
                  )}
                  onClick={() =>
                    menuHandle(childItem.path || "", childItem.label)
                  }
                >
                  {childItem.label}
                </div>
              ))}
          </div>
        </div>
      ))}
    </div>
  );
}