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

        this.container.innerHTML = "<input />";
        this.input = this.container.getElementsByTagName("input")[0];

        this.input.style.outline = "none";
        this.input.style.border = "none";
        this.input.style.width = "100%";
        this.input.style.height = "100%";
        this.input.style.padding = "3px 6px";
        this.input.style.background = "transparent";

        this.container.style.border = "2px solid transparent";

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

        this.input.onchange = this.inputChanged.bind(this);
        this.input.onmouseenter = this.mouseEnter.bind(this);
        this.input.onmouseleave = this.mouseLeave.bind(this);
        this.input.onfocus = this.inputFocus.bind(this);
        this.input.onblur = this.inputBlur.bind(this);
    }

    resize(width, height) {
    }

    updateConfig(config) {
        switch (config.k) {
            case "text.content":
                this.input.value = config.v;
                break;

            case "text.textColor":
                this.input.style.color = config.v;
                break;
            case "text.textSize":
                this.input.style.fontSize = config.v + "px";
                break;

            case "frame.cornerRadius":
                this.container.style.borderRadius = config.v + "px";
                break;

            case "frame.normal.fill":
                this.container.style.background = this.normalFill = config.v;
                break;
            case "frame.normal.borderColor":
                this.container.style.borderColor = this.normalBorderColor = config.v;
                break;

            case "frame.over.fill":
                this.overFill = config.v;
                break;
            case "frame.over.borderColor":
                this.overBorderColor = config.v;
                break;
            case "frame.focus.fill":
                this.focusFill = config.v;
                break;
            case "frame.focus.borderColor":
                this.focusBorderColor = config.v;
                break;
        }
    }

    mouseEnter() {
        if (this.isFocus) {
            return;
        }

        this.container.style.background = this.overFill;
        this.container.style.borderColor = this.overBorderColor;
    }
    mouseLeave() {
        if (this.isFocus) {
            return;
        }

        this.container.style.background = this.normalFill;
        this.container.style.borderColor = this.normalBorderColor;
    }
    inputFocus() {
        this.isFocus = true;

        this.container.style.background = this.focusFill;
        this.container.style.borderColor = this.focusBorderColor;
    }
    inputBlur() {
        this.isFocus = false;
        this.mouseLeave();
    }

    inputChanged() {
        dataEventHandler.TriggerEvent(this.component, "inputchange", this.input.value);
    }
}