import { useNavigate, useLocation } from "react-router-dom";
import { Statistic } from "@arco-design/web-react";
import { useSelector } from "react-redux";
import IconFont from "@/components/IconFont";
import ICON from "@/assets/images/Sidebar/sidebar_icon.png";
import ICONRETRACT 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 studentInfo = useSelector((state) => state.student.studentInfo);
  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={isCollapsed ? ICON : ICONRETRACT} alt="icon" />
      </div>
      <div className="user-info-wrapper">
        <img
          alt="avatar"
          className="user-avatar"
          src="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
        />
        {isCollapsed && (
          <div className="user-info">
            <span className="user-name">{studentInfo?.realName}</span>
            <span className="user-id">学号：{studentInfo?.id}</span>
          </div>
        )}
      </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"
                      src={location.pathname === j.path ? j.active : j.default}
                    />
                    <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" />
      </div>
    </div>
  );
};

export default Sidebar;