import { Button } from "antd";
import { useCallback } from "react";
import { useNavigate } from "react-router-dom";
import NavBarButton from "./NavBarButton";
import { useDispatch } from "react-redux";

function NavBar() {
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const navigateHandler = useCallback(
    (type) => {
      navigate(`/map/${type}`, { replace: true });
      if (type !== 1 && type !== 2) {
        dispatch.data.update({
          toolbar: { showPanel: true },
        });
      }
    },
    [navigate, dispatch]
  );

  return (
    <div className="nav-bar">
      <NavBarButton
        text={"两极协同-拉布拉多海"}
        onClick={() => navigateHandler(1)}
      />
      <NavBarButton
        text={"两极协同-南极青藏高原"}
        onClick={() => navigateHandler(2)}
      />
      <NavBarButton
        text={"两极协同-大西洋"}
        onClick={() => navigateHandler(3)}
      />
      <NavBarButton
        text={"三级联动-青藏高原上层"}
        onClick={() => navigateHandler(4)}
      />
      <NavBarButton
        text={"三级联动-东亚夏季风"}
        onClick={() => navigateHandler(5)}
      />
      <NavBarButton
        text={"三级联动-东亚夏季风"}
        onClick={() => navigateHandler(5)}
      />
      <NavBarButton
        text={"三级联动-东亚夏季风"}
        onClick={() => navigateHandler(5)}
      />
      <NavBarButton
        text={"三级联动-东亚夏季风"}
        onClick={() => navigateHandler(5)}
      />
    </div>
  );
}

export default NavBar;
