import { useCallback, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { useCesium } from "resium";
import { Select } from "antd";

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

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

  const handleChange = (value) => {
    setValue(value);
    const pointEntity = viewer.entities.getById("point");
    if (!viewer) return;
    if (value === "overhead") {
      // 俯视
      viewer.trackedEntity = pointEntity;
      const destination = pointEntity.position.getValue(
        viewer.clock.currentTime
      );
      if (!destination) return;
      const newDestination = new Cesium.Cartesian3();
      newDestination.x = destination.x;
      newDestination.y = destination.y + 13000000;
      newDestination.z = destination.z;
      viewer.camera.flyTo({
        destination: newDestination,
      });
    } else if (value === "sideview") {
      // 侧视
      // viewer.trackedEntity = pointEntity;
      viewer.trackedEntity = undefined;
      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(130, -10.5, 20000000),
      });
    } else {
      // 跟随mftata
      viewer.trackedEntity = pointEntity;
      const destination = pointEntity.position.getValue(
        viewer.clock.currentTimes
      );
      if (!destination) return;
      const newDestination = Cesium.Cartesian3.clone(destination);
      newDestination.y = destination.y + 1000000;
      viewer.camera.flyTo({
        destination: newDestination,
        orientation: {
          heading: Cesium.Math.toRadians(0.0),
          pitch: -Cesium.Math.PI_OVER_FOUR,
          roll: 0.0,
        },
        duration: 0,
      });
    }
  };

  const navigateHandler = useCallback(() => {
    navigate("/home", { replace: true });
    dispatch.data.resetState();
  }, [navigate, dispatch]);

  const showPanelHandler = useCallback(
    (value) => {
      dispatch.data.updateToolbar({
        showPanel: value,
      });
    },
    [dispatch]
  );

  return (
    <div className="toolbar">
      <div className={"focusBtn"} onClick={navigateHandler}>
        返回首页
      </div>
      {/* <Select
        // onSelect={handleChange}
        onChange={handleChange}
        value={value}
        getPopupContainer={(node) => node}
        options={[
          // {
          //   value: "overhead",
          //   label: "俯视视角",
          // },
          {
            value: "sideview",
            label: "侧视视角",
          },
          {
            value: "follow",
            label: "跟随视角",
          },
        ]}
      /> */}
      <Select
        onChange={showPanelHandler}
        value={!!toolbar.showPanel}
        getPopupContainer={(node) => node}
        options={[
          {
            value: true,
            label: "开启展板",
          },
          {
            value: false,
            label: "关闭展板",
          },
        ]}
      />
    </div>
  );
}

export default CustomToolbar;