import { Fragment } from "react";
import { Dropdown } from "antd";
import NavBarButton from "./NavBarButton";
import styles from "./index.module.less";

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

function NavBar() {
  const navigateHandler = (type) => window.open(`/map/${type}`, "_blank");

  return (
    <Fragment>
      <div className="nav-bar-first">
        <NavBarButton
          text={"数据集成和共享"}
          onClick={() => navigateHandler("")}
        />
        <Dropdown
          menu={{ items: itemsTwo }}
          trigger={["click"]}
          overlayClassName={styles.navDropdown}
        >
          <NavBarButton text={"方法库集成与在线计算"} />
        </Dropdown>
        <Dropdown
          menu={{ items: itemsThree }}
          trigger={["click"]}
          overlayClassName={styles.navDropdown}
        >
          <NavBarButton text={"在线决策支持服务"} />
        </Dropdown>
        <Dropdown
          menu={{ items: itemsFour }}
          trigger={["click"]}
          overlayClassName={styles.navDropdown}
        >
          <NavBarButton text={"三极联动"} />
        </Dropdown>
      </div>
    </Fragment>
  );
}

export default NavBar;
