class ConveyorComponent {
    render(container, component, width, height, configs) {
        this.container = container;
        this.component = component;

        this.width = width;
        this.height = height;

        this.container.innerHTML = `<canvas width='${width}' height='${height}' />`;
        this.canvas = this.container.getElementsByTagName("canvas")[0];
        this.ctx = this.canvas.getContext("2d");

        for (const config of configs) {
            this.updateConfig(config);
        }

        this.showRun = true;
        this.angle = 0;
        requestAnimationFrame(this.drawConveyor.bind(this));
    }

    resize(width, height) {
        this.width = width;
        this.height = height;

        this.canvas.setAttribute("width", width);
        this.canvas.setAttribute("height", height);
    }

    updateConfig(config) {
        switch (config.k) {
            case "beltColor":
                this.beltColor = config.v;
                break;
            case "bodyColor":
                this.bodyColor = config.v;
                break;
            case "arrowColor":
                this.arrowColor = config.v;
                break;
            case "wheelBack":
                this.wheelBack = config.v;
                break;
            case "wheelFront":
                this.wheelFront = config.v;
                break;
            case "direction":
                this.direction = config.v;
                break;
            case "runCondition":
                this.showRun = expHandler.GetBoolValue(config.v);
                break;
        }
    }

    drawConveyor() {
        this.ctx.clearRect(0, 0, this.width, this.height);
        this.ctx.imageSmoothingEnabled = true;

        const w = this.width - 4;
        const h = this.height - 4;
        const r = h / 2;
        const o = 2;

        let realAngle = this.angle;
        if (this.direction === "right2left") {
            realAngle = -realAngle;
        }
        const px = (r - 10) * Math.cos(realAngle);
        const py = (r - 10) * Math.sin(realAngle);

        const arrowSide = this.height + 10;
        const arrowItem = 24;
        const arrowWidth = this.width - arrowSide * 2;
        const arrowNum = Math.floor(arrowWidth / arrowItem);
        const arrowSpace = arrowWidth / (arrowNum - 1);

        //主体
        this.ctx.beginPath();
        this.ctx.arc(o + r, o + r, r, Math.PI / 2, -Math.PI / 2);
        this.ctx.lineTo(w + o - r, o);
        this.ctx.arc(w + o - r, o + r, r, -Math.PI / 2, Math.PI / 2);
        this.ctx.closePath();

        this.ctx.fillStyle = this.bodyColor;
        this.ctx.fill();
        this.ctx.strokeStyle = this.beltColor;
        this.ctx.lineWidth = 2;
        this.ctx.stroke();

        //左轮
        this.ctx.beginPath();
        this.ctx.arc(o + r, o + r, r - 6, Math.PI / 2, -Math.PI / 2);
        this.ctx.arc(o + r, o + r, r - 6, -Math.PI / 2, Math.PI / 2);
        this.ctx.closePath();

        this.ctx.fillStyle = this.wheelBack;
        this.ctx.fill();
        this.ctx.strokeStyle = this.wheelFront;
        this.ctx.lineWidth = 2;
        this.ctx.stroke();

        //右轮
        this.ctx.beginPath();
        this.ctx.arc(w + o - r, o + r, r - 6, Math.PI / 2, -Math.PI / 2);
        this.ctx.arc(w + o - r, o + r, r - 6, -Math.PI / 2, Math.PI / 2);
        this.ctx.closePath();

        this.ctx.fillStyle = this.wheelBack;
        this.ctx.fill();
        this.ctx.strokeStyle = this.wheelFront;
        this.ctx.lineWidth = 2;
        this.ctx.stroke();

        if (this.showRun) {
            //左针
            this.ctx.moveTo(o + r, o + r);
            this.ctx.lineTo(o + r + px, o + r + py);
            this.ctx.strokeStyle = this.wheelFront;
            this.ctx.lineWidth = 2;
            this.ctx.stroke();

            //右针
            this.ctx.moveTo(w + o - r, o + r);
            this.ctx.lineTo(w + o - r + px, o + r + py);
            this.ctx.strokeStyle = this.wheelFront;
            this.ctx.lineWidth = 2;
            this.ctx.stroke();
        }

        //箭头
        for (let i = 0; i < arrowNum; i++) {
            const start = arrowSide + i * arrowSpace;

            this.ctx.beginPath();
            if (this.direction === "left2right") {
                this.ctx.moveTo(start, o + r - 6);
                this.ctx.lineTo(start + 7, o + r);
                this.ctx.lineTo(start, o + r + 6);
            }
            else {
                this.ctx.moveTo(start + 7, o + r - 6);
                this.ctx.lineTo(start, o + r);
                this.ctx.lineTo(start + 7, o + r + 6);
            }
            this.ctx.strokeStyle = this.arrowColor;
            this.ctx.lineWidth = 3;
            this.ctx.stroke();
        }

        this.angle += 0.05;
        requestAnimationFrame(this.drawConveyor.bind(this));
    }
}