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

        this.container.innerHTML = "<div><div></div><div></div></div>";
        const outer = this.container.getElementsByTagName("div")[0];
        const children = outer.getElementsByTagName("div");
        this.front = children[0];
        this.text = children[1];

        this.container.style.overflow = "hidden";

        outer.style.width = "100%";
        outer.style.height = "100%";
        outer.style.position = "relative";

        this.front.style.position = "absolute";
        this.front.style.left = "0";
        this.front.style.top = "0";
        this.front.style.height = "100%";

        this.text.style.position = "absolute";
        this.text.style.left = "0";
        this.text.style.top = "50%";
        this.text.style.width = "100%";
        this.text.style.textAlign = "center";
        this.text.style.transform = "translateY(-50%)";

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

    resize(width, height) {
    }

    updateConfig(config) {
        switch (config.k) {
            case "bar.cornerRadius":
                this.container.style.borderRadius = config.v + "px";
                break;
            case "bar.background":
                this.container.style.background = config.v;
                break;
            case "bar.foreground":
                this.front.style.background = config.v;
                break;
            case "text.color":
                this.text.style.color = config.v;
                break;
            case "text.size":
                this.text.style.fontSize = config.v + "px";
                break;
            case "text.show":
                this.showText = config.v === "1";
                this.showProgress();
                break;
            case "text.content":
                this.textContent = config.v;
                this.showProgress();
                break;
            case "text.unit":
                this.textUnit = config.v;
                this.showProgress();
                break;
        }
    }

    showProgress() {
        let progress = expHandler.GetNumberValue(this.textContent);
        if (progress < 0) {
            progress = 0;
        }
        if (progress > 100) {
            progress = 100;
        }

        if (this.showText) {
            this.text.innerText = progress + this.textUnit;
        }
        else {
            this.text.innerText = "";
        }
        this.front.style.width = progress + "%";
    }
}