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

        this.container.innerHTML = `<div style="width:100%;height:100%;position:relative;"><div style="width:100%;height:100%;position:absolute;"></div></div>`;

        this.picture = this.container.firstChild.firstChild;

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

        this.angle = 0;
        this.showRotate = true;
        requestAnimationFrame(this.rotatePicture.bind(this));
    }

    resize(width, height) {
    }

    updateConfig(config) {
        switch (config.k) {
            case "fill":
                this.picture.style.background = config.v;
                break;
            case "direction":
                this.direction = config.v;
                break;
            case "speed":
                this.speed = config.v;
                break;
            case "rotateCondition":
                this.showRotate = expHandler.GetBoolValue(config.v);
                break;
        }
    }

    rotatePicture() {
        if (this.showRotate) {
            this.picture.style.transform = `rotate(${this.angle}deg)`;
        }

        let step = 0;
        switch (this.speed) {
            case "slow":
                step = 1;
                break;
            case "middle":
                step = 3;
                break;
            case "fast":
                step = 6;
                break;
        }
        if (this.direction !== "clockwise") {
            step = -step;
        }
        this.angle += step;

        requestAnimationFrame(this.rotatePicture.bind(this));
    }
}