import { useLocation, useNavigate } from "react-router-dom";
import { Menu } from "antd";
import { HomeOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
import styles from "./index.module.less";

function CustomToolbar() {
  const navigate = useNavigate();
  const location = useLocation();

  const mapList = [
    {
      label: "首页",
      value: "/",
      icon: <HomeOutlined />,
      onClick: () => {
        navigate("/home", { replace: true });
      },
      key: "/",
    },
    {
      label: "数据集成和共享",
      title: "数据集成和共享",
      value: "/map/",
      icon: <MenuUnfoldOutlined />,
      onClick: () => {
        navigate("/", { replace: true });
      },
      // key: "/ ",
    },
    {
      label: "随机森林方法在线计算案例",
      title: "随机森林方法在线计算案例",
      value: "/map/",
      icon: <MenuUnfoldOutlined />,
      onClick: () => {
        navigate("/", { replace: true });
      },
      // key: "/ ",
    },
    {
      label: "过去千年气候重建数据同化",
      title: "过去千年气候重建数据同化",
      value: "/map/",
      icon: <MenuUnfoldOutlined />,
      onClick: () => {
        navigate("/map/climateReconDataAssim", { replace: true });
      },
      key: "/map/climateReconDataAssim",
    },
    {
      label: "北极海冰预报",
      title: "北极海冰预报",
      value: "/map/",
      icon: <MenuUnfoldOutlined />,
      onClick: () => {
        navigate("/", { replace: true });
      },
      // key: "/ ",
    },
    {
      label: "北极航线智能规划",
      title: "北极航线智能规划",
      value: "/map/",
      icon: <MenuUnfoldOutlined />,
      onClick: () => {
        navigate("/", { replace: true });
      },
      // key: "/ ",
    },
    {
      label: "两极协同—拉布拉多海海温偏暖控制夏季高原年代际增温",
      title: "两极协同—拉布拉多海海温偏暖控制夏季高原年代际增温",
      value: "/map/1",
      icon: <MenuUnfoldOutlined />,
      onClick: () => {
        navigate("/map/1", { replace: true });
      },
      key: "/map/1",
    },
    {
      label: "两极协同—南极涛动有效调节青藏高原降水和加热",
      title: "两极协同—南极涛动有效调节青藏高原降水和加热",
      value: "/map/2",
      icon: <MenuUnfoldOutlined />,
      onClick: () => {
        navigate("/map/2", { replace: true });
      },
      key: "/map/2",
    },
    {
      label: "两极协同—连接南极和北极的热带大西洋经向模的媒介作用",
      title: "两极协同—连接南极和北极的热带大西洋经向模的媒介作用",
      value: "/map/3",
      icon: <MenuUnfoldOutlined />,
      onClick: () => {
        navigate("/map/3", { replace: true });
      },
      key: "/map/3",
    },
    {
      label: "三极联动影响青藏高原上层温度",
      title: "三极联动影响青藏高原上层温度",
      value: "/map/4",
      icon: <MenuUnfoldOutlined />,
      onClick: () => {
        navigate("/map/4", { replace: true });
      },
      key: "/map/4",
    },
    {
      label: "三级联动影响东亚夏季风",
      title: "三级联动影响东亚夏季风",
      value: "/map/5",
      icon: <MenuUnfoldOutlined />,
      onClick: () => {
        navigate("/map/5", { replace: true });
      },
      key: "/map/5",
    },
    {
      label: "三极冰盖/冰川表面冰雪冻融对比关联与科学认知",
      title: "三极冰盖/冰川表面冰雪冻融对比关联与科学认知",
      value: "/map/6",
      icon: <MenuUnfoldOutlined />,
      onClick: () => {
        navigate("/map/6", { replace: true });
      },
      key: "/map/6",
    },
  ];

  return (
    <div className={styles.drawerToolbar}>
      <Menu selectedKeys={[location.pathname]} items={mapList} />
    </div>
  );
}

export default CustomToolbar;
