import React, {Component} from 'react'
import './ExampleDrawPage.css'
import {GIS} from "iclient3d-plot-diy";
import {interval, take} from "rxjs";
import {Bp} from "iclient3d-plot-diy";

const {Cesium} = window;

export default class ExampleFlyPage extends Component {

    constructor(props) {
        super(props);
        this.state = {
            htmlString: '<h3>正在加载中...</h3>',
        };
    }

    componentDidMount() {

        fetch('./example/ExampleBpPage.md')
            .then(response => response.text())
            .then(mdText => {
                this.setState({htmlString: window.marked.parse(mdText)});
            });
        this.showData();
        //监听拨盘事件
        this.mapFunction.addBpListener(function (id, dom) {
            if (id && dom) {
                dom.innerHTML = '';
                const newElement = document.createElement('canvas');
                newElement.id = 'bpCanvas';
                dom.append(newElement);

                const bpConfig = {
                    canvasId: 'bpCanvas',
                    items: [
                        {name: '图标1', img: './project3d/icon/bpImgs/icon-1.png'},
                        {name: '图标2', img: './project3d/icon/bpImgs/icon-2.png'},
                        {name: '图标3', img: './project3d/icon/bpImgs/icon-3.png'},
                        {name: '图标4', img: './project3d/icon/bpImgs/icon-4.png'},
                    ]
                };
                this.setState({
                    bp: new Bp(bpConfig)
                })
                this.state.bp.createBp();
                this.state.bp.listenClick((index) => {
                    this.setState({
                        clickBpIndex: index
                    });
                });
            }
        }, this);
    }

    showData() {

        let centerCartesian = Cesium.Cartesian3.fromDegrees(102.73181802939419, 30.982754659441543);
        // 中心点坐标
        const ellipsoid = Cesium.Ellipsoid.WGS84;
        const enuMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(centerCartesian, ellipsoid);

        let endRad = Cesium.Math.toRadians(360);
        let angleStep = Cesium.Math.toRadians(3);
        let points = this.generateSectorPositions(centerCartesian, 100, 0, endRad, angleStep, enuMatrix, true);

        let arr = points.map(point => {
            let car = Cesium.Cartographic.fromCartesian(point);
            return {
                lon: Cesium.Math.toDegrees(car.longitude),
                lat: Cesium.Math.toDegrees(car.latitude),
                height: car.height
            };
        });

        let option = {
            "bz": true,
            "code": "ccccc",
            "bzlx": "simple",
            "jbwb": "R:00017",
            "type": "2010",
            "useModify": false,
            "lon": arr[0].lon,
            "lat": arr[0].lat,
            "height": arr[0].height || 0,
            points: []
        }
        this.mapFunction.mapApiService.showDrawDatas([option]);

        interval(300).pipe(take(120)).subscribe(number => {
            this.mapFunction.mapApiService.updateDraw("ccccc", {
                lon: arr[number].lon,
                lat: arr[number].lat,
                points: arr.slice(0, number)
            });
        });
    }

    render() {
        return (
            <div className={"example_draw_container"}>
                <h3>军标绘制拨盘功能</h3>
                <div className={"map_wrapper"}>
                    <GIS refs={
                        e => {
                            this.mapFunction = e
                        }
                    }
                         useSvgIcon={true}
                         plotUrl={this.state.plotUrl}
                         mapRef={this}
                         showDefaultLayer={true}
                    />
                </div>
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>
            </div>
        )
    }

    /**
     * 生成扇形边界点坐标
     */
    generateSectorPositions(center, radius, startRad, endRad, angleStep, enuMatrix, isFullCircle) {
        const positions = [];

        // 如果不是完整圆，添加起点到中心的线
        if (!isFullCircle) {
            positions.push(center);
        }

        // 生成弧线上的点
        for (let angle = startRad; angle <= endRad; angle += angleStep) {
            const east = radius * Math.sin(angle);  // 东方向对应sin
            const north = radius * Math.cos(angle); // 北方向对应cos

            const localOffset = new Cesium.Cartesian3(east, north, 0);
            const worldPosition = Cesium.Matrix4.multiplyByPoint(
                enuMatrix,
                localOffset,
                new Cesium.Cartesian3()
            );
            positions.push(worldPosition);
        }

        // 确保包含终点
        const finalEast = radius * Math.sin(endRad);
        const finalNorth = radius * Math.cos(endRad);
        const finalOffset = new Cesium.Cartesian3(finalEast, finalNorth, 0);
        const finalPosition = Cesium.Matrix4.multiplyByPoint(
            enuMatrix,
            finalOffset,
            new Cesium.Cartesian3()
        );
        positions.push(finalPosition);

        // 如果不是完整圆，添加回到中心的线
        if (!isFullCircle) {
            positions.push(center);
        } else {
            // 完整圆则闭合环
            positions.push(positions[0]);
        }

        return positions;
    }
}