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

        this.container.style.display = "flex";
        this.container.style.flexDirection = "column";
        this.container.style.textAlign = "center";
        this.container.style.justifyContent = "center";
        this.container.style.cursor = "pointer";

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

        this.container.onmouseenter = this.mouseEnter.bind(this);
        this.container.onmouseleave = this.mouseLeave.bind(this);
    }

    resize(width, height) {
    }

    updateConfig(config) {
        const index = this.configs.findIndex(p => p.k === config.k);
        if (index === -1) {
            this.configs.push(config);
        }
        else {
            this.configs[index].v = config.v;
        }

        this.showNormalConfig(config);
    }

    mouseEnter() {
        for (const config of this.configs) {
            this.showOverConfig(config);
        }
    }
    mouseLeave() {
        for (const config of this.configs) {
            this.showNormalConfig(config);
        }
    }
    showNormalConfig(config) {
        switch (config.k) {
            case "all.content":
                this.container.innerText = config.v;
                break;

            case "normal.text.fontColor":
                this.container.style.color = config.v;
                break;
            case "normal.text.fontSize":
                this.container.style.fontSize = config.v + "px";
                break;
            case "normal.text.fontFamily":
                this.container.style.fontFamily = config.v;
                break;
            case "normal.text.fontBold":
                this.container.style.fontWeight = config.v === "1" ? "bold" : "normal";
                break;
            case "normal.text.fontUnderline":
                this.container.style.textDecoration = config.v === "1" ? "underline" : "none";
                break;

            case "normal.frame.cornerRadius":
                this.container.style.borderRadius = config.v + "px";
                break;
            case "normal.frame.fill":
                this.container.style.background = config.v;
                break;
            case "normal.frame.borderWidth":
                this.container.style.borderWidth = config.v + "px";
                break;
            case "normal.frame.borderColor":
                this.container.style.borderColor = config.v;
                break;
            case "normal.frame.borderStyle":
                this.container.style.borderStyle = config.v;
                break;
        }
    }
    showOverConfig(config) {
        switch (config.k) {
            case "all.content":
                this.container.innerText = config.v;
                break;

            case "over.text.fontColor":
                this.container.style.color = config.v;
                break;
            case "over.text.fontSize":
                this.container.style.fontSize = config.v + "px";
                break;
            case "over.text.fontFamily":
                this.container.style.fontFamily = config.v;
                break;
            case "over.text.fontBold":
                this.container.style.fontWeight = config.v === "1" ? "bold" : "normal";
                break;
            case "over.text.fontUnderline":
                this.container.style.textDecoration = config.v === "1" ? "underline" : "none";
                break;

            case "over.frame.cornerRadius":
                this.container.style.borderRadius = config.v + "px";
                break;
            case "over.frame.fill":
                this.container.style.background = config.v;
                break;
            case "over.frame.borderWidth":
                this.container.style.borderWidth = config.v + "px";
                break;
            case "over.frame.borderColor":
                this.container.style.borderColor = config.v;
                break;
            case "over.frame.borderStyle":
                this.container.style.borderStyle = config.v;
                break;
        }
    }
}