import { Entity, PointGraphics, Viewer } from "resium";
import styles from "./index.module.less";
import { useMemo } from "react";
import { BingMapsImageryProvider, BingMapsStyle } from "cesium";
import Picker from "./Picker";

function MapLayout({ children, className, ...rest }) {
  const imageryProvider = useMemo(
    () =>
      new BingMapsImageryProvider({
        url: "https://dev.virtualearth.net",
        key: "Ahv1KDJwbpJl4V8zklaRXcoueWXoNLo16osJiU4Zk07vc-VNNzJ0gB81TZyPqNFz",
        mapStyle: BingMapsStyle.AERIAL,
      }),
    []
  );

  return (
    <Viewer
      className={`${styles.cesiumContainer} ${className}`}
      full
      homeButton={false}
      sceneModePicker={false}
      navigationHelpButton={false}
      shouldAnimate={false}
      infoBox={false}
      timeline={false}
      fullscreenButton={false}
      geocoder={false}
      baseLayerPicker={false}
      animation={false}
      selectionIndicator={false}
      // imageryProvider={imageryProvider}
    >
      <Entity position={Cesium.Cartesian3.fromDegreesArray([0, 90])}>
        <PointGraphics color={Cesium.Color.SKYBLUE} pixelSize={10} />
      </Entity>
      <Picker />
      {children}
    </Viewer>
  );
}

export default MapLayout;
