import { useNavigate, useLocation } from "react-router-dom";
import { Statistic } from "@arco-design/web-react";
import IconFont from "@/components/IconFont";
import Logo from "@/assets/images/Sidebar/logo.png";
import BTNICON from "@/assets/images/Sidebar/btn_icon.png";
import routes from "@/routes";
import "./index.css";

const Sidebar = ({ isCollapsed, setIsCollapsed }) => {
  const navigate = useNavigate();
  const location = useLocation();

  const handleNavClick = (path) => {
    navigate(path);
  };

  // 切换侧边栏展开/折叠状态
  const toggleSidebar = () => {
    setIsCollapsed((prev) => !prev);
  };

  return (
    <div
      className={`${
        !isCollapsed
          ? "sidebar-retract-wrapper sidebar-expand-wrapper"
          : "sidebar-expand-wrapper"
      }`}
    >
      <div className="sidebar-title">
        <img src={Logo} alt="logo" />
        <p>多多畅职教育系统</p>
      </div>
      <div className="user-info">
        <img
          alt="avatar"
          className="user-avatar"
          src="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
        />
      </div>
      <Statistic
        className="visitor-count"
        groupSeparator
        value={125670}
        prefix="访客总数："
      />
      <ul className="sidebar-menu">
        {routes
          .filter((item) => item.showMenu)
          ?.map((item) => (
            <div key={item.key} className="sidebar-menu-item-wrapper">
              <p className="sidebar-menu-title">{item.name}</p>
              {item.routes
                ?.filter((i) => i.showMenuItem)
                ?.map((j) => (
                  <li
                    className={
                      location.pathname === j.path
                        ? "sidebar-menu-item-active sidebar-menu-item"
                        : "sidebar-menu-item"
                    }
                    key={j.path}
                    onClick={() => handleNavClick(j.path)}
                  >
                    <IconFont className="sidebar-menu-icon" name={j.icon} />
                    <span className="sidebar-menu-text">{j.name}</span>
                  </li>
                ))}
            </div>
          ))}
      </ul>
      <div className="sidebar-btn" onClick={toggleSidebar}>
        <img src={BTNICON} alt="btn" className="sidebar-btn-icon" />
        <span className="sidebar-btn-text">展开/收起</span>
      </div>
    </div>
  );
};

export default Sidebar;