// ViewShed.js
import glsl from './glsl'
import glsl2 from './glsl2'
import Event from "../../../Event";
import MouseTip from "../../../MouseTip";
import Tools from "../../../Tools";
import EventBinding from '../../Element/Dialog/eventBinding';
import Controller from "../../../Controller";
import Dialog from '../../../BaseDialog';
import { html } from "./_element";
/**
 * @constructor
 * @description 可视域分析
 * @param sdk
 * @param {Object} options 选项。
 * @param {Cesium.Cartesian3} options.viewPosition 观测点位置。
 * @param {Cesium.Cartesian3} options.viewPositionEnd 最远观测点位置（如果设置了观测距离，这个属性可以不设置）。
 * @param {Number} options.viewPointHeight=1.8 视点高度（单位`米`）。
 * @param {Number} options.viewDistance 观测距离（单位`米`）。
 * @param {Number} options.viewHeading 航向角（单位`度`）。
 * @param {Number} options.viewPitch 俯仰角（单位`度`）。
 * @param {Number} options.horizontalViewAngle=90 可视域水平夹角（单位`度`）。
 * @param {Number} options.verticalViewAngle=60 可视域垂直夹角（单位`度`）。
 * @param {String} options.visibleAreaColor=#008000 可视区域颜色（默认值`绿色`）。
 * @param {String} options.invisibleAreaColor=#FF0000 不可视区域颜色（默认值`红色`）。
 */
class ViewShedStage extends Tools {

    constructor(sdk, options = {}, _Dialog = {}) {
        super(sdk, options)

        // if (Object.hasOwn(options.viewPosition, 'lng') && Object.hasOwn(options.viewPosition, 'lat') && Object.hasOwn(options.viewPosition, 'alt')) {
        //     this.error = '请提供观测点位置！'
        //     window.ELEMENT && window.ELEMENT.Message({
        //         message: '请提供观测点位置！',
        //         type: 'warning',
        //         duration: 1500
        //     });
        //     return
        // }

        this.viewer = sdk.viewer;
        this.options = {}
        this.options.viewPosition = options.viewPosition;
        this.options.viewPositionEnd = options.viewPositionEnd;
        this.options.horizontalViewAngle = (options.horizontalViewAngle || options.horizontalViewAngle === 0) ? options.horizontalViewAngle : 90.0;
        this.options.verticalViewAngle = (options.verticalViewAngle || options.verticalViewAngle === 0) ? options.verticalViewAngle : 60.0;
        this.options.visibleAreaColor = options.visibleAreaColor || '#008000';
        this.options.invisibleAreaColor = options.invisibleAreaColor || '#FF0000';
        this._elms = {};
        this.viewPointHeight = options.viewPointHeight
        // this.enabled = (typeof options.enabled === "boolean") ? options.enabled : true;
        // this.softShadows = (typeof options.softShadows === "boolean") ? options.softShadows : true;
        // this.size = options.size || 10240; // 2048
        this.ids = []
        this.Dialog = _Dialog
        this._EventBinding = new EventBinding()
        this.html = null
        YJ.Analysis.AnalysesResults.push(this)
        ViewShedStage.edit(this)
        // ViewShedStage.edit(this)
        // this.update();
    }

    get viewPointHeight() {
        return this.options.viewPointHeight
    }

    set viewPointHeight(v) {
        let viewPointHeight = Math.floor(Number(v) * 10) / 10
        if (isNaN(viewPointHeight)) {
            viewPointHeight = 1.8
        }
        if (viewPointHeight < 0) {
            viewPointHeight = 0
        }
        this.options.viewPointHeight = viewPointHeight
        this._elms.viewPointHeight && this._elms.viewPointHeight.forEach((item) => {
            item.value = viewPointHeight
        })
    }

    get viewPosition() {
        return this.options.viewPosition
    }

    set viewPosition(v) {
        this.options.viewPosition = v
        this.ids[0] && (this.viewer.entities.getById(this.ids[0]).position = new Cesium.Cartesian3.fromDegrees(v.lng, v.lat, v.alt))
        this.update()
        // let viewPosition3 = Cesium.Cartesian3.fromDegrees(this.options.viewPosition.lng, this.options.viewPosition.lat, this.options.viewPosition.alt)
    }

    get viewPositionEnd() {
        return this.options.viewPositionEnd
    }

    set viewPositionEnd(v) {
        this.options.viewPositionEnd = v
        this.ids[1] && (this.viewer.entities.getById(this.ids[1]).position = new Cesium.Cartesian3.fromDegrees(v.lng, v.lat, v.alt))
        this.update()
        // let viewPositionEnd3 = Cesium.Cartesian3.fromDegrees(this.options.viewPositionEnd.lng, this.options.viewPositionEnd.lat, this.options.viewPositionEnd.alt)
        // this.viewDistance = this.viewPositionEnd ? Cesium.Cartesian3.distance(this.viewPosition, this.viewPositionEnd) : (options.viewDistance || 100.0);
    }

    get horizontalViewAngle() {
        return this.options.horizontalViewAngle
    }

    set horizontalViewAngle(v) {
        this.options.horizontalViewAngle = v
        if (this._DialogObject && this._DialogObject._element && this._DialogObject._element.content) {
            let contentElm = this._DialogObject._element.content
            let e_horizontalViewAngle = contentElm.querySelector("input[name='horizontalViewAngle']")
            e_horizontalViewAngle.value = v
            let rangeNodeActive = contentElm.getElementsByClassName('range-node-active')[0]
            let rangeNodeActiveText = rangeNodeActive.getElementsByClassName('range-node-active-text')[0]
            rangeNodeActiveText.innerHTML = v + '°';
            let rangeProcess = contentElm.getElementsByClassName('range-process')[0]
            rangeProcess.style.width = v / 180 * 100 + '%'
        }
        this.update()
    }

    get visibleAreaColor() {
        return this.options.visibleAreaColor
    }

    set visibleAreaColor(v) {
        this.options.visibleAreaColor = v
        this.update()
    }

    get invisibleAreaColor() {
        return this.options.invisibleAreaColor
    }

    set invisibleAreaColor(v) {
        this.options.invisibleAreaColor = v
        this.update()
    }

    get verticalViewAngle() {
        return this.options.verticalViewAngle
    }

    set verticalViewAngle(v) {
        this.options.verticalViewAngle = v
        this.update()
    }

    get viewDistance() {
        let viewPosition3 = Cesium.Cartesian3.fromDegrees(this.options.viewPosition.lng, this.options.viewPosition.lat, this.options.viewPosition.alt + this.viewPointHeight)
        let viewPositionEnd3 = Cesium.Cartesian3.fromDegrees(this.options.viewPositionEnd.lng, this.options.viewPositionEnd.lat, this.options.viewPositionEnd.alt)
        let distance = Cesium.Cartesian3.distance(viewPosition3, viewPositionEnd3)
        return distance
    }

    get viewHeading() {
        let viewPosition3 = Cesium.Cartesian3.fromDegrees(this.options.viewPosition.lng, this.options.viewPosition.lat, this.options.viewPosition.alt + this.viewPointHeight)
        let viewPositionEnd3 = Cesium.Cartesian3.fromDegrees(this.options.viewPositionEnd.lng, this.options.viewPositionEnd.lat, this.options.viewPositionEnd.alt)
        let heading = getHeading(viewPosition3, viewPositionEnd3)
        return heading
    }

    get viewPitch() {
        let viewPosition3 = Cesium.Cartesian3.fromDegrees(this.options.viewPosition.lng, this.options.viewPosition.lat, this.options.viewPosition.alt + this.viewPointHeight)
        let viewPositionEnd3 = Cesium.Cartesian3.fromDegrees(this.options.viewPositionEnd.lng, this.options.viewPositionEnd.lat, this.options.viewPositionEnd.alt)
        let pitch = getPitch(viewPosition3, viewPositionEnd3)
        return pitch
    }

    static create(that) {
        that.destroy()
        let count = 0;
        if (!YJ.Measure.GetMeasureStatus()) {
            that.event = new Event(that.sdk)
            that.tip = new MouseTip('左键选择观测点位置，右键取消', that.sdk)
            YJ.Measure.SetMeasureStatus(true)
            that.event.mouse_left((movement, cartesian) => {
                if (!that.viewPosition) {
                    that.options.viewPosition = that.cartesian3Towgs84(cartesian, that.viewer)
                    that.ids.push(ViewShedStage.create_point(that, cartesian))
                    that.tip.set_text("左键选择最远观测点位置，右键取消")
                }
                count++
                if (count === 2) {
                    that.options.viewPositionEnd = that.cartesian3Towgs84(cartesian, that.viewer)
                    that.ids.push(ViewShedStage.create_point(that, cartesian))
                    end()
                    that.update()
                }
            })
            that.event.mouse_move((movement, cartesian) => {
                that.tip.setPosition(cartesian, movement.endPosition.x, movement.endPosition.y)
            })
            that.event.mouse_right((movement, cartesian) => {
                that.ids.forEach(id => {
                    that.viewer.entities.removeById(id)
                })
                that.ids = []
                end()
            })
            that.event.gesture_pinck_start((movement, cartesian) => {
                let startTime = new Date()
                that.event.gesture_pinck_end(() => {
                    let endTime = new Date()
                    if (endTime - startTime >= 500) {
                        that.ids.forEach(id => {
                            that.viewer.entities.removeById(id)
                        })
                        that.ids = []
                        end()
                    }
                })
            })
        }
        else {
            console.log('上一次测量未结束')
        }

        function end() {
            that.ids.forEach(id => {
                let entity = that.viewer.entities.getById(id)
                entity.show = false
            })
            YJ.Measure.SetMeasureStatus(false)
            that.tip.destroy()
            that.event.destroy()
            that.tip = null
            that.event = null
        }
    }

    static create_point(that, cartesian) {
        let id = that.randomString()
        let p = that.cartesian3Towgs84(cartesian, that.viewer)
        let params = {
            id: id,
            position: Cesium.Cartesian3.fromDegrees(p.lng, p.lat, p.alt),
            billboard: {
                image: that.getSourceRootPath() + '/img/point.png',
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                disableDepthTestDistance: Number.POSITIVE_INFINITY,
                color: Cesium.Color.WHITE.withAlpha(0.99)
            }
        }
        that.viewer.entities.add(
            new Cesium.Entity(params)
        )
        return id
    }


    add() {
        this.createLightCamera();
        this.createShadowMap();
        this.createPostStage();
        // this.drawFrustumOutline();
        this.drawSketch();
        ViewShedStage.getcanvas(this)
    }

    update() {
        this.clear();
        this.add();
    }

    static async edit(that) {
        if (that._DialogObject && that._DialogObject.close) {
            that._DialogObject.close()
            that._DialogObject = null
        }
        that._DialogObject = await new Dialog(that.sdk.viewer._container, {
            title: '可视域分析', left: '180px', top: '100px',
            closeCallBack: () => {
                that.Dialog.closeCallBack && that.Dialog.closeCallBack()
                YJ.Measure.SetMeasureStatus(false)
                that.editevent && that.editevent.destroy()
                that.ControllerObject && that.ControllerObject.destroy()
                that.ids.forEach(id => {
                    that.viewer.entities.removeById(id)
                })
            },
        })
        await that._DialogObject.init()
        that._DialogObject._element.body.className = that._DialogObject._element.body.className + ' view-shed'
        let contentElm = document.createElement('div');
        contentElm.innerHTML = html()
        that._DialogObject.contentAppChild(contentElm)
        let resetBtn = that._DialogObject._element.body.getElementsByClassName('edit')[0];
        resetBtn.addEventListener('click', () => {
            that.nodeEdit()
        })
        let drawElm = document.createElement('button')
        drawElm.innerHTML = '绘制'
        drawElm.addEventListener('click', () => {
            ViewShedStage.create(that)
        })
        that._DialogObject.footAppChild(drawElm)
        that.html = contentElm
        let all_elm = contentElm.getElementsByTagName("*")
        that._EventBinding.on(that, all_elm)
        that._elms = that._EventBinding.element
        // //经度值
        // let e_lng = contentElm.querySelector("span[name='lng']")
        // e_lng.innerHTML = Number(that.options.viewPosition.lng.toFixed(8))

        // //纬度值
        // let e_lat = contentElm.querySelector("span[name='lat']")
        // e_lat.innerHTML = Number(that.options.viewPosition.lat.toFixed(8))

        // //高度值
        // let e_alt = contentElm.querySelector("span[name='alt']")
        // e_alt.innerHTML = Number(that.options.viewPosition.alt.toFixed(8))

        // //偏航角
        // let e_viewHeading = contentElm.querySelector("span[name='viewHeading']")
        // e_viewHeading.innerHTML = Number(that.viewHeading.toFixed(8))

        // //俯仰角
        // let e_viewPitch = contentElm.querySelector("span[name='viewPitch']")
        // e_viewPitch.innerHTML = Number(that.viewPitch.toFixed(8))

        //视域夹角
        let e_horizontalViewAngle = contentElm.querySelector("input[name='horizontalViewAngle']")
        e_horizontalViewAngle.value = that.options.horizontalViewAngle
        let rangeNodeActive = contentElm.getElementsByClassName('range-node-active')[0]
        let rangeNodeActiveText = rangeNodeActive.getElementsByClassName('range-node-active-text')[0]
        let rangeProcess = contentElm.getElementsByClassName('range-process')[0]
        let percentage = that.horizontalViewAngle / 180 * 100
        rangeNodeActive.style.left = percentage + '%';
        rangeProcess.style.width = percentage + '%'
        rangeNodeActiveText.innerHTML = that.horizontalViewAngle + '°';
        let timeout
        e_horizontalViewAngle.addEventListener('input', () => {
            let percentage = e_horizontalViewAngle.value / 180 * 100
            rangeNodeActive.style.left = percentage + '%';
            rangeProcess.style.width = percentage + '%';
            rangeNodeActiveText.innerHTML = e_horizontalViewAngle.value + '°';
        })
        e_horizontalViewAngle.addEventListener('change', () => {
            clearTimeout(timeout)
            timeout = setTimeout(() => {
                that.horizontalViewAngle = e_horizontalViewAngle.value;
            }, 300);
        });
    }

    static getcanvas(that) {
        if (!that.viewPosition) {
            return
        }
        if (that.viewBillboardPrimitive) {
            that.viewer.scene.primitives.remove(that.viewBillboardPrimitive)
            that.viewBillboardPrimitive = null
        }
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d')
        canvas.width = 220
        canvas.height = 180
        canvas.style.background = "#000000"
        let img = new Image();
        const data = [
            {
                images: that.getSourceRootPath() + '/img/bubble/lng.png',
                text: '经度：' + parseFloat(that.viewPosition.lng.toFixed(10)) + '°'
            },
            {
                images: that.getSourceRootPath() + '/img/bubble/lat.png',
                text: '纬度：' + parseFloat(that.viewPosition.lat.toFixed(10)) + '°'
            },
            {
                images: that.getSourceRootPath() + '/img/bubble/h.png',
                text: '高度：' + Number(((parseFloat(that.viewPosition.alt.toFixed(2)) + Number(that.viewPointHeight))).toFixed(2)) + ' m'
            },
            {
                images: that.getSourceRootPath() + '/img/bubble/heading.png',
                text: '偏航角：' + parseFloat(that.viewHeading.toFixed(10)) + '°'
            },
            {
                images: that.getSourceRootPath() + '/img/bubble/pitch.png',
                text: '俯仰角：' + parseFloat(that.viewPitch.toFixed(10)) + '°'
            }
        ]
        img.src = that.getSourceRootPath() + '/img/bubble/bubble.png';
        let imagesLoaded = 0
        img.onload = () => {
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            data.forEach((item, index) => {
                const img = new Image();
                img.src = item.images;
                img.onload = () => {
                    ctx.drawImage(img, 12, 12 + (index * 26));
                    ctx.fillStyle = "#fff";
                    ctx.font = "12px Arial";
                    ctx.fillText(item.text, 44, 28 + (index * 26));
                    imagesLoaded++;
                    if (imagesLoaded === data.length) {
                        that.viewBillboardPrimitive = that.viewer.scene.primitives.add(new Cesium.BillboardCollection())
                        that.viewBillboardPrimitive.add({
                            position: Cesium.Cartesian3.fromDegrees(that.viewPosition.lng, that.viewPosition.lat, that.viewPosition.alt + that.viewPointHeight),
                            image: canvas,
                            width: 200,
                            height: 180,
                            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                            disableDepthTestDistance: Number.POSITIVE_INFINITY,
                        })
                    }
                };
            })
        };
    }

    clear() {
        YJ.Measure.SetMeasureStatus(false)
        this.tip && this.tip.destroy()
        this.event && this.event.destroy()
        this.tip = null
        this.event = null
        if (this.sketch) {
            this.viewer.entities.removeById(this.sketch.id);
            this.sketch = null;
        }
        if (this.frustumOutline) {
            // this.frustumOutline.destroy();
            this.viewer.entities.removeById(this.frustumOutline.id);
            this.frustumOutline = null;
        }
        if (this.postStage) {
            this.viewer.scene.postProcessStages.remove(this.postStage);
            this.postStage = null;
        }

    }

    destroy() {
        this.clear()
        this.editevent && this.editevent.destroy()
        this.ControllerObject && this.ControllerObject.destroy()
        this.ids.forEach(id => {
            this.viewer.entities.removeById(id)
        })
        this.ids = []
        if (this.viewBillboardPrimitive) {
            this.viewer.scene.primitives.remove(this.viewBillboardPrimitive)
        }
        this.viewBillboardPrimitive = null
        this.options.viewPosition = null
        this.options.viewPositionEnd = null
        YJ.Measure.SetMeasureStatus(false)
        if (this._originalShadowMap) {
            this.viewer.scene.shadowMap = this._originalShadowMap
            this._originalShadowMap = null
        }
        this.viewer.shadows = this.viewer._shadows
    }

    nodeEdit() {
        if (YJ.Measure.GetMeasureStatus()) {
            console.log('上一次测量未结束')
        }
        else {
            this.editevent && this.editevent.destroy()
            this.ids.forEach(id => {
                let entity = this.viewer.entities.getById(id)
                entity.show = true
            })
            let selectPoint
            YJ.Measure.SetMeasureStatus(true)
            // this.tip = new MouseTip('左键选择要操作的观测点，右键取消', this.sdk)
            this.editevent = new Event(this.sdk)
            this.editevent.mouse_left((movement, cartesian) => {
                let pick = this.viewer.scene.pick(movement.position);
                if (pick && pick.id && pick.id.id && this.ids.indexOf(pick.id.id) != -1 && (!selectPoint || selectPoint.id != pick.id.id)) {
                    selectPoint = pick.id
                    // this.event.destroy()
                    // this.tip.destroy()
                    this.viewer.entities.getById(this.ids[0]).position = new Cesium.Cartesian3.fromDegrees(this.viewPosition.lng, this.viewPosition.lat, this.viewPosition.alt)
                    this.viewer.entities.getById(this.ids[1]).position = new Cesium.Cartesian3.fromDegrees(this.viewPositionEnd.lng, this.viewPositionEnd.lat, this.viewPositionEnd.alt)
                    this.ControllerObject && this.ControllerObject.destroy()
                    this.ControllerObject = new Controller(this.sdk, { position: { ...this.cartesian3Towgs84(selectPoint.position._value, this.sdk.viewer) } })
                    this.ControllerObject.controllerCallBack = (params, status) => {
                        if (params.position.alt < 0) {
                            params.position.alt = 0
                        }
                        selectPoint.position = new Cesium.Cartesian3.fromDegrees(params.position.lng, params.position.lat, params.position.alt)
                        if (status) {
                            if (this.ids.indexOf(pick.id.id) == 0) {
                                this.viewPosition = params.position
                            }
                            else {
                                this.viewPositionEnd = params.position
                            }
                            YJ.Measure.SetMeasureStatus(true)
                        }
                    }
                    this.ControllerObject.editTranslational()
                }
            })
            this.editevent.mouse_right((movement, cartesian) => {
                YJ.Measure.SetMeasureStatus(false)
                this.editevent && this.editevent.destroy()
                this.ControllerObject && this.ControllerObject.destroy()
                this.ids.forEach(id => {
                    let entity = this.viewer.entities.getById(id)
                    entity.show = false
                })
                selectPoint = null
            })
            this.editevent.mouse_move((movement, cartesian) => {
                // this.tip.setPosition(
                //     cartesian,
                //     movement.endPosition.x,
                //     movement.endPosition.y
                // )
            })

            this.editevent.gesture_pinck_start((movement, cartesian) => {
                let startTime = new Date()
                this.editevent.gesture_pinck_end(() => {
                    let endTime = new Date()
                    if (endTime - startTime >= 500) {
                        YJ.Measure.SetMeasureStatus(false)
                        this.editevent && this.editevent.destroy()
                        this.ControllerObject && this.ControllerObject.destroy()
                        this.ids.forEach(id => {
                            let entity = this.viewer.entities.getById(id)
                            entity.show = false
                        })
                        selectPoint = null
                    }
                })
            })

        }

    }

    createLightCamera() {
        if (!this.options.viewPosition) {
            return
        }
        let _this = this
        this.lightCamera = new Cesium.Camera(this.viewer.scene);
        this.lightCamera.position = Cesium.Cartesian3.fromDegrees(this.options.viewPosition.lng, this.options.viewPosition.lat, this.options.viewPosition.alt + this.viewPointHeight);
        // if (this.viewPositionEnd) {
        //     let direction = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(this.viewPositionEnd, this.viewPosition, new Cesium.Cartesian3()), new Cesium.Cartesian3());
        //     this.lightCamera.direction = direction; // direction是相机面向的方向
        // }
        this.lightCamera.frustum.near = this.viewDistance * 0.001;
        this.lightCamera.frustum.far = this.viewDistance;
        const hr = Cesium.Math.toRadians(this.horizontalViewAngle);
        const vr = Cesium.Math.toRadians(this.verticalViewAngle);
        const aspectRatio =
            (this.viewDistance * Math.tan(hr / 2) * 2) /
            (this.viewDistance * Math.tan(vr / 2) * 2);
        this.lightCamera.frustum.aspectRatio = aspectRatio;
        if (hr > vr) {
            this.lightCamera.frustum.fov = hr;
        } else {
            this.lightCamera.frustum.fov = vr;
        }
        this.lightCamera.setView({
            destination: Cesium.Cartesian3.fromDegrees(this.options.viewPosition.lng, this.options.viewPosition.lat, this.options.viewPosition.alt + this.viewPointHeight),
            orientation: {
                heading: Cesium.Math.toRadians(this.viewHeading || 0),
                pitch: Cesium.Math.toRadians(this.viewPitch || 0),
                roll: 0
            }
        });
    }

    createShadowMap() {
        this.shadowMap = new Cesium.ShadowMap({
            context: (this.viewer.scene).context,
            lightCamera: this.lightCamera,
            enabled: true,
            isPointLight: true,
            pointLightRadius: this.viewDistance,
            cascadesEnabled: false,
            size: 2048, // 2048
            softShadows: true,
            normalOffset: false,
            fromLightSource: false
        });
        if (!this._originalShadowMap) {
            this._originalShadowMap = this.viewer.scene.shadowMap
        }
        this.viewer.scene.shadowMap = this.shadowMap;
        // setTimeout(() => {
        //     this.viewer.shadows = this.viewer._shadows
        // }, 0);
    }

    createPostStage() {
        const fs = glsl
        if (Number(Cesium.VERSION.split('.')[1]) >= 102) {
            fs = glsl2
        }
        const postStage = new Cesium.PostProcessStage({
            fragmentShader: fs,
            uniforms: {
                shadowMap_textureCube: () => {
                    this.shadowMap.update(Reflect.get(this.viewer.scene, "_frameState"));
                    return Reflect.get(this.shadowMap, "_shadowMapTexture");
                },
                shadowMap_matrix: () => {
                    this.shadowMap.update(Reflect.get(this.viewer.scene, "_frameState"));
                    return Reflect.get(this.shadowMap, "_shadowMapMatrix");
                },
                shadowMap_lightPositionEC: () => {
                    this.shadowMap.update(Reflect.get(this.viewer.scene, "_frameState"));
                    return Reflect.get(this.shadowMap, "_lightPositionEC");
                },
                shadowMap_normalOffsetScaleDistanceMaxDistanceAndDarkness: () => {
                    this.shadowMap.update(Reflect.get(this.viewer.scene, "_frameState"));
                    const bias = this.shadowMap._pointBias;
                    return Cesium.Cartesian4.fromElements(
                        bias.normalOffsetScale,
                        this.shadowMap._distance,
                        this.shadowMap.maximumDistance,
                        0.0,
                        new Cesium.Cartesian4()
                    );
                },
                shadowMap_texelSizeDepthBiasAndNormalShadingSmooth: () => {
                    this.shadowMap.update(Reflect.get(this.viewer.scene, "_frameState"));
                    const bias = this.shadowMap._pointBias;
                    const scratchTexelStepSize = new Cesium.Cartesian2();
                    const texelStepSize = scratchTexelStepSize;
                    texelStepSize.x = 1.0 / this.shadowMap._textureSize.x;
                    texelStepSize.y = 1.0 / this.shadowMap._textureSize.y;

                    return Cesium.Cartesian4.fromElements(
                        texelStepSize.x,
                        texelStepSize.y,
                        bias.depthBias,
                        bias.normalShadingSmooth,
                        new Cesium.Cartesian4()
                    );
                },
                camera_projection_matrix: this.lightCamera.frustum.projectionMatrix,
                camera_view_matrix: this.lightCamera.viewMatrix,
                helsing_viewDistance: () => {
                    return this.viewDistance;
                },
                helsing_visibleAreaColor: Cesium.Color.fromCssColorString(this.visibleAreaColor),
                helsing_invisibleAreaColor: Cesium.Color.fromCssColorString(this.invisibleAreaColor),
            }
        });
        this.postStage = this.viewer.scene.postProcessStages.add(postStage);
    }

    drawFrustumOutline() {
        const scratchRight = new Cesium.Cartesian3();
        const scratchRotation = new Cesium.Matrix3();
        const scratchOrientation = new Cesium.Quaternion();
        const position = this.lightCamera.positionWC;
        const direction = this.lightCamera.directionWC;
        const up = this.lightCamera.upWC;
        let right = this.lightCamera.rightWC;
        right = Cesium.Cartesian3.negate(right, scratchRight);
        let rotation = scratchRotation;
        Cesium.Matrix3.setColumn(rotation, 0, right, rotation);
        Cesium.Matrix3.setColumn(rotation, 1, up, rotation);
        Cesium.Matrix3.setColumn(rotation, 2, direction, rotation);
        let orientation = Cesium.Quaternion.fromRotationMatrix(rotation, scratchOrientation);

        let instance = new Cesium.GeometryInstance({
            geometry: new Cesium.FrustumOutlineGeometry({
                frustum: this.lightCamera.frustum,
                origin: Cesium.Cartesian3.fromDegrees(this.options.viewPosition.lng, this.options.viewPosition.lat, this.options.viewPosition.alt + this.viewPointHeight),
                orientation: orientation
            }),
            id: Math.random().toString(36).substr(2),
            attributes: {
                color: Cesium.ColorGeometryInstanceAttribute.fromColor(
                    Cesium.Color.YELLOWGREEN//new Cesium.Color(0.0, 1.0, 0.0, 1.0)
                ),
                show: new Cesium.ShowGeometryInstanceAttribute(true)
            }
        });

        this.frustumOutline = this.viewer.scene.primitives.add(
            new Cesium.Primitive({
                geometryInstances: [instance],
                appearance: new Cesium.PerInstanceColorAppearance({
                    flat: true,
                    translucent: false
                })
            })
        );
    }

    drawSketch() {
        this.sketch = this.viewer.entities.add({
            name: 'sketch',
            position: Cesium.Cartesian3.fromDegrees(this.options.viewPosition.lng, this.options.viewPosition.lat, this.options.viewPosition.alt + this.viewPointHeight),
            orientation: Cesium.Transforms.headingPitchRollQuaternion(
                Cesium.Cartesian3.fromDegrees(this.options.viewPosition.lng, this.options.viewPosition.lat, this.options.viewPosition.alt + this.viewPointHeight),
                Cesium.HeadingPitchRoll.fromDegrees(this.viewHeading - 90, this.viewPitch, 0.0)
            ),
            ellipsoid: {
                radii: new Cesium.Cartesian3(
                    this.viewDistance,
                    this.viewDistance,
                    this.viewDistance
                ),
                // innerRadii: new Cesium.Cartesian3(2.0, 2.0, 2.0),
                minimumClock: Cesium.Math.toRadians(-this.horizontalViewAngle / 2),
                maximumClock: Cesium.Math.toRadians(this.horizontalViewAngle / 2),
                minimumCone: Cesium.Math.toRadians(90 - (this.verticalViewAngle / 2)),
                maximumCone: Cesium.Math.toRadians(90 + (this.verticalViewAngle / 2)),
                fill: false,
                outline: true,
                subdivisions: 256,
                stackPartitions: 64,
                slicePartitions: 64,
                outlineColor: Cesium.Color.YELLOWGREEN
            }
        });

        this.frustumOutline = this.viewer.entities.add({
            name: 'sketch',
            position: Cesium.Cartesian3.fromDegrees(this.options.viewPosition.lng, this.options.viewPosition.lat, this.options.viewPosition.alt + this.viewPointHeight),
            orientation: Cesium.Transforms.headingPitchRollQuaternion(
                Cesium.Cartesian3.fromDegrees(this.options.viewPosition.lng, this.options.viewPosition.lat, this.options.viewPosition.alt + this.viewPointHeight),
                Cesium.HeadingPitchRoll.fromDegrees(this.viewHeading - 90, this.viewPitch, 0.0)
            ),
            ellipsoid: {
                radii: new Cesium.Cartesian3(
                    this.viewDistance,
                    this.viewDistance,
                    this.viewDistance
                ),
                innerRadii: new Cesium.Cartesian3(0.0001, 0.0001, 0.0001),
                minimumClock: Cesium.Math.toRadians(-this.horizontalViewAngle / 2),
                maximumClock: Cesium.Math.toRadians(this.horizontalViewAngle / 2),
                minimumCone: Cesium.Math.toRadians(90 - (this.verticalViewAngle / 2)),
                maximumCone: Cesium.Math.toRadians(90 + (this.verticalViewAngle / 2)),
                fill: false,
                outline: true,
                subdivisions: 256,
                stackPartitions: 1,
                slicePartitions: 1,
                outlineColor: Cesium.Color.YELLOWGREEN
            }
        });

    }

}

function getHeading(fromPosition, toPosition) {
    let finalPosition = new Cesium.Cartesian3();
    let matrix4 = Cesium.Transforms.eastNorthUpToFixedFrame(fromPosition);
    Cesium.Matrix4.inverse(matrix4, matrix4);
    Cesium.Matrix4.multiplyByPoint(matrix4, toPosition, finalPosition);
    Cesium.Cartesian3.normalize(finalPosition, finalPosition);
    return Cesium.Math.toDegrees(Math.atan2(finalPosition.x, finalPosition.y));
}

function getPitch(fromPosition, toPosition) {
    let finalPosition = new Cesium.Cartesian3();
    let matrix4 = Cesium.Transforms.eastNorthUpToFixedFrame(fromPosition);
    Cesium.Matrix4.inverse(matrix4, matrix4);
    Cesium.Matrix4.multiplyByPoint(matrix4, toPosition, finalPosition);
    Cesium.Cartesian3.normalize(finalPosition, finalPosition);
    return Cesium.Math.toDegrees(Math.asin(finalPosition.z));
}

export default ViewShedStage;