import { useState, useEffect, useContext } from 'react'
import { MapContext } from './MapContext';
import GlobalContext from '../../../utils/GlobalContext';
import ImageLayer from './ImageLayer';
import ZoneLayer from './ZoneLayer';
import BusinessLayer from './BusinessLayer';

const Cesium = window.Cesium;
const turf = window.turf;
export default function Map(props) {
    const [viewer, setViewer] = useState();

    const { xyzImageOpts } = useContext(GlobalContext)

    useEffect(() => {
        setTimeout(() => {
            Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkMmZjMmYyZC1lZTkzLTQzYjctYmE2NS01NTQ0NzQyMWZhNDMiLCJpZCI6MTA2NjEsImlhdCI6MTYwNjI4NjY2MH0.PN1-x4vXpC68czogub9X0UDA3GaGE-31PZVbrRyI7CQ';

            const viewer = window.vvv = new Cesium.Viewer("map", {
                animation: false, //是否显示动画控件
                homeButton: false, //是否显示home键
                geocoder: false,// 查询
                baseLayerPicker: false, //是否显示图层选择控件
                timeline: false, //是否显示时间线控件
                fullscreenButton: false, //是否全屏显示
                scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
                infoBox: false, //是否显示点击要素之后显示的信息
                sceneModePicker: false, //是否显示投影方式控件  三维/二维
                navigationHelpButton: false, //是否显示帮助信息控件
                terrainProvider: new Cesium.CesiumTerrainProvider({
                    url: "/terrain"
                }),
                skyAtmosphere: false,
                contextOptions: {
                    webgl: {
                        alpha: true,
                    },
                },
            });
            viewer.scene.globe.terrainExaggeration = 1.5;
            viewer.imageryLayers.removeAll()
            viewer.scene.skyBox.destroy();
            viewer.scene.skyBox = undefined;
            viewer.scene.sun.destroy();
            viewer.scene.sun = undefined;
            viewer.scene.moon.destroy();
            viewer.scene.moon = undefined;
            // viewer.scene.sun.show = false;
            // viewer.scene.moon.show = false;
            // viewer.scene.skyBox.show = false;
            viewer.scene.undergroundMode = false;
            viewer.scene.fxaa = true;
            viewer.scene.postProcessStages.fxaa.enabled = true;
            viewer._cesiumWidget._creditContainer.style.display = "none";
            viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString('#041320')// new Cesium.Color(0, 0, 0, 0);
            viewer.scene.backgroundcolor = Cesium.Color.fromCssColorString('#041320');
            viewer.scene.screenSpaceCameraController.enableCollisionDetection = true;
            // viewer.scene.skyAtmosphere.show = false
            // viewer.scene.screenSpaceCameraController.minimumZoomDistance = props.minimumZoomDistance || 1000;
            // viewer.scene.screenSpaceCameraController.maximumZoomDistance = 50000;

            viewer.camera.setView({
                // 设置相机位置
                destination: {
                    x: -1192369.4758368244,
                    y: 5416503.688356532,
                    z: 3317519.447624021
                },
                orientation: {
                    heading: 0.06728175754222843,
                    pitch: -0.5237859735536086,
                    roll: 0.0012702968682072324
                }
            });
            setViewer(viewer)
        }, 1000);

    }, [])

    return <MapContext.Provider value={{
        viewer,
        layerKey: props.layerKey,
        filterStr: props.filterStr
    }}>
        <div id="map" style={{
            position: "absolute",
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
            pointerEvents: "auto"
        }}></div>
        <ImageLayer />
        <ZoneLayer />
        <BusinessLayer />
    </MapContext.Provider>;
}