// Copyright © SixtyFPS GmbH <info@slint-ui.com>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial

struct ButtonColors := {
    base: color,
    pressed: color,
    hovered: color,
}

export global DemoPalette := {
    // Color of the home/settings/ink buttons on the left side bar
    property <color> active-page-icon-color: night-mode ? #6284FF : #122F7B;
    property <color> inactive-page-icon-color: #BDC0D1;

    property <color> main-background: #0E133F;
    property <color> neutral-box: #BDC0D1;

    property <color> page-background-color: night-mode ? #122F7B : white;

    property <color> text-foreground-color: night-mode ? #F4F6FF : black;
    property <color> secondary-foreground-color: #6C6E7A; // FIXME: night mode

    property <color> printer-action-background-color: night-mode ? main-background : white;
    property <color> printer-queue-item-background-color: page-background-color;

    property <color> status-label-text-color: night-mode ? #F1FF98 : #6284FF;

    // Color used for the border / outline of items that can be clicked on, such as the
    // "Print"/"Scan" buttons, the printer queue items (for expansion) or controls such
    // as the combo box or spin box.
    property <color> control-outline-color: #FFBF63;
    property <color> control-secondary: #6284FF;
    property <color> control-foreground: night-mode ? white : #122F7B;  // FIXME: the night mode color was not part of the design

    property <color> primary-push-button-base: #6284FF;
    property <ButtonColors> primary-push-button-colors: {
        base: primary-push-button-base,
        pressed: primary-push-button-base.darker(40%),
        hovered: primary-push-button-base.darker(20%),
    };

    property <color> secondary-push-button-base: #FFBF63;
    property <ButtonColors> secondary-push-button-colors: {
        base: secondary-push-button-base,
        pressed: secondary-push-button-base.darker(40%),
        hovered: secondary-push-button-base.darker(20%),
    };


    property <color> push-button-text-color: white;

    property <length> base-font-size: 12px;

    property <bool> night-mode: false;
}

export Page := Rectangle {
    property<string> header <=> h.text;
    background: DemoPalette.page-background-color;
    property <bool> has-back-button: false;
    callback back;

    TouchArea {} // protect underneath controls

    if (has-back-button) : Image {
        source: @image-url("images/back.svg");
        image-fit: contain;
        colorize: DemoPalette.control-secondary;
        y: h.y + (h.height - height) / 2;
        x: 5px;
        width: 14px;
        height: 24px;
        TouchArea {
            clicked => { back() }
            width: 200%;
            height: 200%;
            x: (parent.width - width) / 2;
            y: (parent.height - height) / 2;
        }
    }

    h := Text {
        font-weight: 900;
        font-size: DemoPalette.base-font-size * 1.75;
        color: DemoPalette.text-foreground-color;
        y: 23px - font-size;
        x: has-back-button ? 30px + 16px : 0px;
        // Allow clicking on the title as well to get back easier when just
        // using fingers on a small screen.
        if (has-back-button) : TouchArea {
            clicked => { back() }
        }
    }
}
export Label := Text {
    color: DemoPalette.text-foreground-color;
    vertical-alignment: center;
    font-weight: 700;
    vertical-stretch: 0;
}

SquareButton := Rectangle {
    callback clicked;
    property<image> img;
    border-radius: 3px;
    border-width: 2px;
    border-color: DemoPalette.control-outline-color;
    touch := TouchArea {
        x: -4px;
        y: -4px;
        width: parent.width + 8px;
        height: parent.height + 8px;
        clicked => {
            root.clicked();
        }
    }
    Image {
        height: 40%;
        width: 40%;
        x: (parent.width - width)/2;
        y: (parent.height - height)/2;
        source <=> root.img;
        image-fit: contain;
        colorize: DemoPalette.control-secondary;
    }
}

export SpinBox := Rectangle {
    property <int> value;
    property <int> minimum;
    property <int> maximum: 100;
    height: 32px;

    HorizontalLayout {
        spacing: 12px;
        padding: 0;
        SquareButton {
            width: root.height - parent.padding * 2;
            img: @image-url("images/minus.svg");
            clicked => {
                if (root.value > root.minimum) {
                    root.value -= 1;
                }
            }
        }

        Rectangle {
            border-radius: 3px;
            border-width: 2px;
            border-color: DemoPalette.control-outline-color;
            Text {
                width: 100%;
                height: 100%;
                vertical-alignment: center;
                horizontal-alignment: center;
                text: value;
                color: DemoPalette.control-foreground;
            }
        }

        SquareButton {
            width: root.height - parent.padding * 2;
            img: @image-url("images/plus.svg");
            clicked => {
                if (root.value < root.maximum) {
                    root.value += 1;
                }
            }
        }
    }
}

export ComboBox := Rectangle {
    property<string> value;
    property<[string]> choices;
    border-radius: 3px;
    border-width: 2px;
    border-color: DemoPalette.control-outline-color;
    height: 32px;
    min-width: label.x + label.width + i.width;
    label := Text {
        vertical-alignment: center;
        horizontal-alignment: left;
        text <=> root.value;
        color: DemoPalette.control-foreground;
        height: 100%;
        x: 12px;
    }
    i := Image {
        source: @image-url("images/down.svg");
        colorize: DemoPalette.control-secondary;
        height: 40%;
        width: height;
        image-fit: contain;
        x: parent.width - width - y;
        y: (parent.height - height)/2;
    }

    TouchArea {
        width: 100%;
        height: 100%;
        clicked => { popup.show(); }
    }

    popup := PopupWindow {
        y: root.height;
        width: root.width;
        Rectangle {
            background: DemoPalette.page-background-color;
            border-radius: 3px;
            border-width: 2px;
            border-color: DemoPalette.control-outline-color;
        }
        VerticalLayout {
            spacing: 6px;
            padding: 3px;
            for value[idx] in root.choices: Rectangle {
                border-radius: 3px;
                background: item-area.has-hover ? DemoPalette.primary-push-button-colors.hovered : #0000;
                HorizontalLayout {
                    Text {
                        text: value;
                        color: item-area.has-hover ? DemoPalette.push-button-text-color : DemoPalette.text-foreground-color;
                        font-size: DemoPalette.base-font-size;
                    }
                }
                item-area := TouchArea {
                    clicked => {
                        root.value = value;
                    }
                }
            }
        }
    }
}

export CheckBox := Rectangle {
    property <bool> checked;
    property <string> text;

    height: 32px;

    HorizontalLayout {
        spacing: 12px;
        padding: 0;
        SquareButton {
            width: root.height - parent.padding * 2;
            img: checked ? @image-url("images/check.svg") : @image-url("");
            clicked => { checked = !checked; }
        }

        if text != "" : Text {
            text <=> root.text;
            vertical-alignment: center;
            horizontal-alignment: center;
            color: DemoPalette.control-foreground;
            horizontal-stretch: 1;
        }
    }

    TouchArea {
        clicked => {
            checked = !checked;
        }
    }
}

export PushButton := Rectangle {
    callback clicked;
    property <string> text <=> label.text;
    property <image> icon <=> img.source;
    property <bool> primary: true;
    property <bool> pressed: touch-area.pressed;

    property <ButtonColors> colors: primary ? DemoPalette.primary-push-button-colors : DemoPalette.secondary-push-button-colors;

    border-radius: 13.5px;

    background: pressed ? colors.pressed : (touch-area.has-hover ? colors.hovered : colors.base);

    horizontal-stretch: 1;

    HorizontalLayout {
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: parent.border-radius;
        padding-right: parent.border-radius;

        img := Image {
            horizontal-stretch: 0;
            colorize: DemoPalette.push-button-text-color;
            image-fit: contain;
            width: 17px;
        }

        label := Text {
            font-weight: 900;
            font-size: DemoPalette.base-font-size * 0.975;
            color: DemoPalette.push-button-text-color;
            horizontal-alignment: center;
            vertical-alignment: center;
        }
    }

    touch-area := TouchArea { clicked => { root.clicked() } }
}