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

        this.container.style.display = "flex";
        this.container.style.flexDirection = "column";

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

        this.updateTextWithFormat();
        setInterval(this.updateTextWithFormat.bind(this), 1000);
    }

    resize(width, height) {
    }

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

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

            case "text.align.horAlign":
                this.container.style.textAlign = config.v;
                break;
            case "text.align.verAlign":
                this.container.style.justifyContent = config.v;
                break;

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

    updateTextWithFormat() {
        const time = new Date();
        let str = this.format;

        str = str.replace("yyyy", time.getFullYear());
        str = str.replace("MM", this.getFixNumber(time.getMonth() + 1, 2));
        str = str.replace("dd", this.getFixNumber(time.getDate(), 2));
        str = str.replace("HH", this.getFixNumber(time.getHours(), 2));
        str = str.replace("mm", this.getFixNumber(time.getMinutes(), 2));
        str = str.replace("ss", this.getFixNumber(time.getSeconds(), 2));

        str = str.replace("y", time.getFullYear());
        str = str.replace("M", time.getMonth() + 1);
        str = str.replace("d", time.getDate());
        str = str.replace("H", time.getHours());
        str = str.replace("m", time.getMinutes());
        str = str.replace("s", time.getSeconds());

        this.container.innerText = str;
    }
    getFixNumber(num, digit) {
        let str = num.toString();
        while (str.length < digit) {
            str = "0" + str;
        }
        return str;
    }
}