import Basic from "./bastic";
import * as Cesium from 'cesium';
import { Category, CesiumTypes, PolylineStyle, Viewer } from './type';
import { Polyline } from "./polyline/polyline";
import { RadarScanCircleMaterial } from "./CustomeTriangleLineMaterialProperty";

export class OilConveyingPipePath extends Polyline {

    constructor(cesium: CesiumTypes, viewer: Viewer, style?: PolylineStyle) {
        super(cesium, viewer, style);

        // const w = 32;
        // 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.arc(w, w / 2, w / 2, 0, 2 * Math.PI);
        // ctx.strokeStyle = (this.style as PolylineStyle).color!
        // ctx.stroke();
        // ctx.moveTo(w / 4, w / 2)
        // ctx.lineTo(w * 7 / 4, w / 2)
        // ctx.stroke();    



        // style!.material = new this.cesium.ImageMaterialProperty({            
        //     image: canvas.toDataURL(),
        //     repeat: new this.cesium.Cartesian2(16, 1),
        //     color: new this.cesium.Color(1, 1, 1, 1),
        //     transparent: false
        // });
        // style!.width = 4
        // this.updateStyle(style!)
        const position = Cesium.Cartesian3.fromDegrees(80, 40);
        const modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);
        const radius = 40000.0;
        const primitive = viewer.scene.primitives.add(new Cesium.Primitive({
            geometryInstances: [
                new Cesium.GeometryInstance({
                    geometry: new Cesium.EllipseGeometry({
                        center: position,
                        semiMajorAxis: radius,
                        semiMinorAxis: radius,
                    })
                })
            ],
            appearance: new Cesium.MaterialAppearance({
                material: new RadarScanCircleMaterial({
                    color: this.cesium.Color.fromCssColorString('rgb(0,255,50)'),
                    sectorColor: this.cesium.Color.fromCssColorString('rgb(0,255,50)'),
                    radians: Math.PI * 3 / 8,
                    offset: 0.2
                }),
                flat: false,
                faceForward: false,
                translucent: true,
                closed: false
            }),
            asynchronous: false,
            modelMatrix: modelMatrix
        }))
        viewer.flyTo(primitive);
        // const material = new RadarScanCircleMaterial({
        //     color: this.cesium.Color.fromCssColorString('rgb(0,255,50)'),
        //     sectorColor: this.cesium.Color.fromCssColorString('rgb(0,255,50)'),
        //     radians: Math.PI * 3 / 8,
        //     offset: 0.2
        // });
        // this.mergeStyle({ material, width: 10 });
        console.log(this.style)
    }
    getCategory(): Category {
        return 'polyline';
    }
}