import { Cartesian3 } from "cesium";
import { Category, CesiumTypes, PolylineStyle, Viewer } from "../type";
import * as Utils from '../utils';
import Basic from "../bastic";

export class ForwardPath extends Basic {
    points: Cartesian3[] = [];
    arrowLengthScale: number = 10;
    maxArrowLength: number = 3000000;
    t: number;
    minPointsForShape: number;
    icon: string = 'E';
    iconSize: number = 64;
    fonSize: number = 24
    rotate: number = 0
    iconType: 'text' | 'url' = 'text'
    constructor(cesium: CesiumTypes, viewer: Viewer, rotate: number = 0, style?: PolylineStyle) {
        super(cesium, viewer, style);
        this.cesium = cesium;
        this.t = 0.3;
        this.minPointsForShape = 3;
        this.rotate = rotate
        this.setState('drawing');
        this.onDoubleClick();
    }
    getCategory(): Category {
        return 'polyline'
    }

    addPoint(cartesian: Cartesian3) {
        this.points.push(cartesian);
        if (this.points.length < 2) {
            this.onMouseMove();
        } else if (this.points.length == 3) {
            this.drawLine();
            this.mainEntity = this.lineEntity
            this.drawBillbord()
            this.finishDrawing();
        }
    }
    updateMovingPoint(cartesian: Cartesian3) {
        const tempPoints = [...this.points, cartesian];
        let geometryPoints = this.createGraphic(tempPoints);
        this.setGeometryPoints(geometryPoints);
        this.drawLine();
        this.mainEntity = this.lineEntity
        if (geometryPoints.length > 2) {
            this.drawBillbord()
        }
    }
    createStraightArrow(positions: Cartesian3[]) {
        const [pnt1, pnt2] = positions.map(this.cartesianToLnglat);
        const distance = Utils.MathDistance(pnt1, pnt2);
        let len = distance / this.arrowLengthScale;
        len = len > this.maxArrowLength ? this.maxArrowLength : len;
        const leftPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len / 2, false);
        const rightPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len / 2, true);
        const points = [...pnt1, ...pnt2, ...leftPnt, ...pnt2, ...rightPnt];
        const cartesianPoints = this.cesium.Cartesian3.fromDegreesArray(points);
        return cartesianPoints;
    }
    updateDraggingPoint(cartesian: Cartesian3, index: number) {
        this.points[index] = cartesian;
        const geometryPoints = this.createGraphic(this.points);
        this.setGeometryPoints(geometryPoints);
        this.drawLine();
        this.drawBillbord()
        this.mainEntity = this.lineEntity
    }
    createGraphic(positions: Cartesian3[]) {
        const lnglatPoints = positions.map((pnt) => {
            return this.cartesianToLnglat(pnt);
        });

        if (positions.length === 2) {
            return this.createStraightArrow(positions);
        }
        const curvePoints = Utils.getCurvePoints(this.t, lnglatPoints);
        // const pnt1 = lnglatPoints[lnglatPoints.length - 2];
        const pnt2 = lnglatPoints[lnglatPoints.length - 1];

        const distance = Utils.wholeDistance(lnglatPoints);
        let len = distance / this.arrowLengthScale;
        // this.iconSize = len * 5000
        len = len > this.maxArrowLength ? this.maxArrowLength : len;
        const leftPnt = Utils.getThirdPoint(curvePoints[curvePoints.length - 2], curvePoints[curvePoints.length - 1], Math.PI / 6, len / 2, false);
        const rightPnt = Utils.getThirdPoint(curvePoints[curvePoints.length - 2], curvePoints[curvePoints.length - 1], Math.PI / 6, len / 2, true);
        const temp = [].concat(...curvePoints);
        const points = [...temp, ...leftPnt, ...pnt2, ...rightPnt];
        const cartesianPoints = this.cesium.Cartesian3.fromDegreesArray(points);
        return cartesianPoints;
    }
    drawBillbord() {
        const [pnt1, pnt2] = this.getPoints().map(this.cartesianToLnglat);
        if (!pnt1 || !pnt2) return
        const angle = Utils.getAzimuth(pnt1, pnt2);
        const w = this.iconSize;
        const canvas = document.createElement('canvas');
        canvas.width = w * 2;
        canvas.height = w;
        const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
        ctx.strokeStyle = (this.style as PolylineStyle).color!
        ctx.lineWidth = 4;
        ctx.strokeRect(0, 0, w, w);

        if (this.rotate !== 0 || this.iconType === 'url') {
            const rotateCanvas = document.createElement('canvas');
            rotateCanvas.width = w;
            rotateCanvas.height = w;
            const rotateCtx = rotateCanvas.getContext('2d') as CanvasRenderingContext2D;
            rotateCtx.translate(w / 2, w / 2)
            rotateCtx.rotate(this.rotate * Math.PI / 180)
            if (this.icon === 'Electric') {
                ctx.beginPath();

                ctx.moveTo(w * 20 / 36, 0); // 顶点
                ctx.lineTo(w * 8 / 36, w * 18 / 36); // 左中1
                ctx.lineTo(w * 14 / 36, w * 18 / 36); // 左中2
                ctx.lineTo(w * 10 / 36, w * 36 / 36); // 底点1
                ctx.lineTo(w * 24 / 36, w * 16 / 36); // 右中1
                ctx.lineTo(w * 18 / 36, w * 16 / 36); // 右中2

                // ctx.lineTo(w * 10 / 36, w * 12 / 36);

                ctx.closePath();

                ctx.strokeStyle = (this.style as PolylineStyle).color!;  // Black color
                ctx.lineWidth = 2;

                ctx.stroke();
            } else {
                rotateCtx.fillStyle = (this.style as PolylineStyle).color!;
                rotateCtx.font = `bold ${this.fonSize * w / 32}px Arial`;
                rotateCtx.textAlign = 'center';
                rotateCtx.textBaseline = 'middle';
                rotateCtx.fillText(this.icon, 0, 0);
            }

            ctx.drawImage(rotateCanvas, 0, 0);
        } else {
            ctx.fillStyle = (this.style as PolylineStyle).color!;
            ctx.font = `bold ${this.fonSize * w / 32}px Arial`;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(this.icon, w / 2, w / 2);
        }

        if (!this.iconEntity) {
            console.log(w)
            this.iconEntity = this.viewer.entities.add({
                position: this.getPoints()[0],
                billboard: {
                    image: canvas.toDataURL(),
                    width: w * 2,
                    height: w,
                    verticalOrigin: this.cesium.VerticalOrigin.CENTER,
                    horizontalOrigin: this.cesium.HorizontalOrigin.CENTER,
                    rotation: Math.PI + angle,
                    alignedAxis: this.cesium.Cartesian3.ZERO,
                    scaleByDistance: new this.cesium.NearFarScalar(1000, 1.0, 5000, 0.5)
                }
            });
        } else {
            this.iconEntity.billboard!.image = new this.cesium.ConstantProperty(canvas.toDataURL())
            this.iconEntity.position = new this.cesium.ConstantPositionProperty(this.getPoints()[0])
            this.iconEntity.billboard!.rotation = new this.cesium.ConstantProperty(Math.PI + angle)
        }

    }
    updateStyle() {
        this.lineEntity ? this.lineEntity!.polyline!.material = this.style!.material : null
        this.drawBillbord()
    }
    getPoints() {
        return this.points;
    }
    setGeometryPoints(geometryPoints: Cartesian3[]) {
        this.positions = geometryPoints;
        this.drawBillbord()
    }
}