import { useState, useEffect } from "react";
import Search20Regular from "@ricons/fluent/Search20Regular";
import { useLocation, useNavigate } from "react-router";
import { ICustomPage } from "../types";
interface IProps {
  customPages: ICustomPage[];
}

interface INavItem extends ICustomPage {
  active: boolean;
  key: string;
}

export default function Nav(props: IProps) {
  const navigate = useNavigate();
  const location = useLocation();
  const [navList, setNavList] = useState<INavItem[]>([]);

  useEffect(() => {
    const navList = props.customPages.map((i: ICustomPage) => ({
      ...i,
      key: i.path,
      active: false,
    }));
    setNavList(navList);
  }, [props.customPages]);

  /**
   * 路由变化同步页面文字 active 状态
   */
  useEffect(() => {
    const path = location.pathname;
    setNavList((p) => p.map((i) => ({ ...i, active: path === i.path })));
  }, [location.pathname]);

  /**
   * 点击切换页面
   */
  const onClickNavItem = (key: string) => {
    const nav = navList.find((i: INavItem) => i.key === key);
    setNavList((p: INavItem[]) =>
      p.map((i: INavItem) => ({ ...i, active: key === i.key }))
    );
    navigate(nav!.path);
  };

  return (
    <nav>
      <div className="start"></div>
      <div className="end">
        <div className="search-container">
          <Search20Regular />
          <input type="text" placeholder="搜索 / 待开发" />
        </div>
        <ul>
          {navList.map((item) => (
            <li key={item.key} onClick={() => onClickNavItem(item.key)}>
              <span className={item.active ? "active" : ""}>{item.title}</span>
            </li>
          ))}
        </ul>
      </div>
    </nav>
  );
}