// Copyright © SixtyFPS GmbH <info@sixtyfps.io>
// SPDX-License-Identifier: (GPL-3.0-only OR LicenseRef-SixtyFPS-commercial)

export global Palette := {
    property<color> window-background: #ecedeb;
    property<color> text-color: #090909;
    property<color> text-color-disabled: lightgray;
    property<color> text-color-secondary: #111;
    property<color> button-background: #aaa;
    property<color> button-background-disabled: #aaa;
    property<color> button-hover: #8c8c8c;
    property<color> button-pressed: #575757;
    property<color> highlight-background: #2b60ae;
    property<color> placeholder-text: #ccc;
    property<color> border-color: #d0d3cf;
    property<color> base-background-color: white;
    property<color> checkbox-unchecked-indicator: #aaa;
}

export global StyleMetrics := {
    property<length> layout-spacing: 5px;
    property<length> layout-padding: 5px;
    property<length> text-cursor-width: 2px;
    property<color> window-background: #ecedeb; //FIXME: Palette.window-background  does not compile (cannot access globals from other globals #175)
    property<color> default-text-color: #090909;
    property<brush> textedit-background: white; //Palette.base-background-color;
    property<color> textedit-text-color: #090909;//Palette.text-color;
    property<brush> textedit-background-disabled: white; //Palette.neutralLighter;
    property<color> textedit-text-color-disabled: lightgray;// Palette.text-color-disabled;
}

export Button := Rectangle {
    callback clicked;
    property<string> text;
    property<length> font-size;
    property<bool> pressed: self.enabled && touch-area.pressed;
    property<bool> enabled <=> touch-area.enabled;
    property<image> icon;

    border-width: 1px;
    border-radius: 2px;
    border-color: Palette.text-color;
    background: !self.enabled ? Palette.button-background-disabled: self.pressed ? Palette.button-pressed : (touch-area.has-hover ? Palette.button-hover : Palette.button-background);
    animate background { duration: 100ms; }
    horizontal-stretch: 0;
    vertical-stretch: 0;


    HorizontalLayout {
        padding-top: root.border-radius + 8px;
        padding-bottom: root.border-radius + 8px;
        padding-left: root.border-radius + 16px;
        padding-right: root.border-radius + 16px;
        spacing: StyleMetrics.layout-spacing;

        if (icon.width > 0 && icon.height > 0): Image {
            source <=> icon;
            // Avoid that the icon makes the button grow. This isn't quite a perfect approximation,
            // as the glyphs are typically a bit smaller than the font size. 12px is the default
            // in the GL backend.
            width: root.font-size > 0 ? root.font-size : 12px;
        }

        Text {
            text: root.text;
            font-size: root.font-size;
            horizontal-alignment: center;
            vertical-alignment: center;
            color: root.enabled ? Palette.text-color : Palette.text-color-disabled;
        }
    }

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

ScrollBar := Rectangle {
    background: white;
    border-color: Palette.button-background;
    border-width: 1px;
    property <bool> horizontal;
    property<length> max;
    property<length> page-size;
    // this is always negative and migger than  -max
    property<length> value;

    handle := Rectangle {
        width: !horizontal ? parent.width : max <= 0phx ? 0phx : parent.width * (page-size / (max + page-size));
        height: horizontal ? parent.height : max <= 0phx ? 0phx : parent.height * (page-size / (max + page-size));

        border-radius: (horizontal ? self.height : self.width) / 2;
        background: touch-area.pressed ? Palette.button-pressed : (touch-area.has-hover ? Palette.button-hover : Palette.button-background);
        animate background { duration: 100ms; }
        x: !horizontal ? 0phx : (root.width - handle.width) * (new-value / max);
        y: horizontal ? 0phx : (root.height - handle.height) * (new-value / max);
        property<length> new-value-tmp : -root.value + (
            !touch-area.pressed ? 0phx
            : horizontal ?  (touch-area.mouse-x - touch-area.pressed-x) * (max / (root.width - handle.width))
            : (touch-area.mouse-y - touch-area.pressed-y) * (max / (root.height - handle.height)));
        property<length> new-value : new-value-tmp < 0phx ? 0phx
            : root.max < 0phx ? 0phx
            : new-value-tmp > root.max ? root.max : new-value-tmp;
    }
    touch-area := TouchArea {
        width: parent.width;
        height: parent.height;
        clicked => {
            root.value = -handle.new-value;
        }
    }

}

export ScrollView := Rectangle {
    property <length> viewport-width <=> fli.viewport-width;
    property <length> viewport-height <=> fli.viewport-height;
    property <length> viewport-x <=> fli.viewport-x;
    property <length> viewport-y <=> fli.viewport-y;
    property <length> visible-width <=> fli.width;
    property <length> visible-height <=> fli.height;
    property <bool> enabled;
    property <bool> has-focus;
    min-height: 50px;
    min-width: 50px;
    border-width: 1px;
    border-color: !has-focus ? Palette.border-color : Palette.highlight-background;
    background: Palette.base-background-color;
    horizontal-stretch: 1;
    vertical-stretch: 1;

    fli := Flickable {
        @children
        x: 1px;
        y: 1px;
        interactive: false;
        viewport-y <=> vbar.value;
        viewport-x <=> hbar.value;
        width: parent.width - vbar.width - 1px;
        height: parent.height - hbar.height -1px;
    }
    vbar := ScrollBar {
        width: 16px;
        x: fli.width + fli.x;
        height: fli.height + fli.y;
        horizontal: false;
        max: fli.viewport-height - fli.height;
        page-size: fli.height;
    }
    hbar := ScrollBar {
        height: 16px;
        y: fli.height + fli.y;
        width: fli.width + fli.x;
        horizontal: true;
        max: fli.viewport-width - fli.width;
        page-size: fli.width;
    }
}