import { useCallback, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useLocation, useNavigate } from "react-router-dom";
import { useCesium } from "resium";
import { Button, Drawer, List, Select } from "antd";
import { HomeOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
import { useMouse } from "ahooks";
import styles from "./index.module.less";

function CustomToolbar() {
  const { viewer } = useCesium();
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const location = useLocation();

  const { toolbar } = useSelector((state) => state.data);
  const [value, setValue] = useState("sideview");

  const [mouseX, setMouseX] = useState(0);
  const [drawerOpen, setDrawerOpen] = useState(false);

  const mapList = [
    {
      label: "首页",
      value: "/",
      icon: <HomeOutlined />,
      onClick: () => {
        navigate("/home", { replace: true });
      },
    },
    {
      label: "两极协同—拉布拉多海海温偏暖控制夏季高原年代际增温",
      value: "/map/1",
      icon: <MenuUnfoldOutlined />,
      onClick: () => {
        navigate("/map/1", { replace: true });
      },
    },
    {
      label: "两极协同—南极涛动有效调节青藏高原降水和加热",
      value: "/map/2",
      icon: <MenuUnfoldOutlined />,
      onClick: () => {
        navigate("/map/2", { replace: true });
      },
    },
    {
      label: "两极协同—连接南极和北极的热带大西洋经向模的媒介作用",
      value: "/map/3",
      icon: <MenuUnfoldOutlined />,
      onClick: () => {
        navigate("/map/3", { replace: true });
      },
    },
    {
      label: "三极联动影响青藏高原上层温度",
      value: "/map/4",
      icon: <MenuUnfoldOutlined />,
      onClick: () => {
        navigate("/map/4", { replace: true });
      },
    },
    {
      label: "三级联动影响东亚夏季风",
      value: "/map/5",
      icon: <MenuUnfoldOutlined />,
      onClick: () => {
        navigate("/map/5", { replace: true });
      },
    },
  ];

  useEffect(() => {
    const handleMouseMove = (event) => {
      setMouseX(event.clientX);
    };

    document.addEventListener("mousemove", handleMouseMove);

    return () => {
      document.removeEventListener("mousemove", handleMouseMove);
    };
  }, []);

  const isAtRightEdge = mouseX >= window.innerWidth - 20;
  const iaClose = mouseX + 320 <= window.innerWidth;

  useEffect(() => {
    if (isAtRightEdge && !drawerOpen) {
      setDrawerOpen(true);
    } else if (iaClose && drawerOpen) {
      setDrawerOpen(false);
    }
  }, [isAtRightEdge, iaClose]);

  const onDrawerClose = useCallback(() => {
    setDrawerOpen(false);
  }, []);

  return (
    <div className="toolbar" onMouseLeave={onDrawerClose}>
      <Drawer
        placement="right"
        // open={true}
        open={drawerOpen}
        width={350}
        mask={false}
        closable={false}
        className={styles.drawerToolbar}
      >
        <List
          dataSource={mapList}
          renderItem={(item, index) => {
            return (
              <List.Item
                key={index}
                onClick={item?.onClick}
                className={
                  location.pathname === item.value ? "active-item" : ""
                }
              >
                <List.Item.Meta avatar={item.icon} title={item.label} />
              </List.Item>
            );
          }}
        ></List>
      </Drawer>
    </div>
  );
}

export default CustomToolbar;
