import { Button, VerticalBox, HorizontalBox, AboutSlint } from "std-widgets.slint";

export component MicrowaveUI inherits Window {
    width: 320px;
    height: 240px;

    property <[string]> wattages: ["180W", "220W", "360W", "480W", "620W", "800W"];
    property <int> selected-wattage: 0;

    callback add-10s();
    callback sub-10s();
    callback start-timer();
    callback stop-timer();
    callback reset-timer();

    in property <bool> show-start-timer: true;
    in property <bool> show-stop-timer: false;
    in property <bool> show-reset-timer: false;

    in property <string> timer-text: "00:00:000";

    property <image> start-timer-icon: @image-url("../img/play.png");
    property <image> stop-timer-icon: @image-url("../img/pause.png");
    property <image> reset-timer-icon: @image-url("../img/xmark-square.png");

    function multifunction-button-pressed() {
        if (show-start-timer) {
            start-timer();
        }
        if (show-stop-timer) {
            stop-timer();
        }
        if (show-reset-timer) {
            reset-timer();
        }
    }

    function multifunction-button-icon() -> image {
        if (show-start-timer) {
            return start-timer-icon;
        }
        if (show-stop-timer) {
            return stop-timer-icon;
        }
        if (show-reset-timer) {
            return reset-timer-icon;
        }
        return start-timer-icon;
    }

    VerticalBox {
        alignment: start;
        Text {
            text: "                     Microwave UI (Slint)";
            font-size: 14px;
            horizontal-alignment: center;
        }
    }

    HorizontalBox {
        VerticalBox {
            padding-top: 15px;
            padding-bottom: 20px;
            Button {
                enabled: (selected-wattage < wattages.length - 1) && show-start-timer;
                text: "+";
                clicked => {
                    selected-wattage += 1
                }
            }

            Text {
                font-size: 24px;
                text: wattages[selected-wattage];
                horizontal-alignment: center;
                vertical-alignment: center;
            }

            Button {
                enabled: !(selected-wattage <= 0) && show-start-timer;
                text: "-";
                clicked => {
                    selected-wattage -= 1
                }
            }
        }

        VerticalBox {
            alignment: center;
            Text {
                text: timer-text;
                font-size: 24px;
                horizontal-alignment: center;
            }

            Rectangle {
                height: 4px;
            }

            HorizontalLayout {
                alignment: center;
                spacing: 8px;

                Button {
                    text: "+10s";
                    enabled: show-start-timer;
                    clicked => {
                        add-10s();
                    }
                }

                Text {
                    text: "Set Timer";
                    vertical-alignment: center;
                }

                Button {
                    text: "-10s";
                    enabled: show-start-timer;
                    clicked => {
                        sub-10s();
                    }
                }
            }

            HorizontalLayout {
                alignment: center;
                spacing: 8px;
                Button {
                    icon: @image-url("../img/restart.png");
                    clicked => {
                        reset-timer();
                    }
                }

                Button {
                    icon: multifunction-button-icon();
                    // visible: root.show_start_timer;
                    clicked => {
                        multifunction-button-pressed();
                    }
                }
            }
        }
    }
}