/* LICENSE BEGIN
    This file is part of the SixtyFPS Project -- https://sixtyfps.io
    Copyright (c) 2020 Olivier Goffart <olivier.goffart@sixtyfps.io>
    Copyright (c) 2020 Simon Hausmann <simon.hausmann@sixtyfps.io>

    SPDX-License-Identifier: GPL-3.0-only
    This file is also available under commercial licensing terms.
    Please contact info@sixtyfps.io for more information.
LICENSE END */

export { NativeStyleMetrics as StyleMetrics }

// FIXME: the font-size should be removed but is required right now to compile the printer_demo
export Button := NativeButton {
    property<length> font-size;
    enabled: true;
}
export CheckBox := NativeCheckBox { }
export SpinBox := NativeSpinBox { property<length> font-size; }
export Slider := NativeSlider { }
export GroupBox := NativeGroupBox {
    GridLayout {
        padding_left: root.native_padding_left;
        padding_right: root.native_padding_right;
        padding_top: root.native_padding_top;
        padding_bottom: root.native_padding_bottom;
        @children
    }
 }
export LineEdit := NativeLineEdit {
    property <string> text;
    property <string> placeholder_text;
    enabled: true;
    focused: input.has_focus;
    forward-focus: input;
    callback accepted(string);
    callback edited(string);
    GridLayout {
        padding_left: root.native_padding_left;
        padding_right: root.native_padding_right;
        padding_top: root.native_padding_top;
        padding_bottom: root.native_padding_bottom;
        input := TextInput {
            text <=> root.text;
            enabled: root.enabled;
            accepted => {
                root.accepted(self.text);
            }
            edited => {
                root.edited(self.text);
            }
        }
        Text {
            color: #ecedeb; // FIXME: use the palette
            col: 0;
            row: 0;
            text: root.text == "" ? root.placeholder_text : "";
        }
    }
}

export ScrollView := NativeScrollView {
    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;

    vertical_max: fli.viewport_height > fli.height ? fli.viewport_height - fli.height : 0phx;
    vertical_page_size: fli.height;

    horizontal_max: fli.viewport_width > fli.width ? fli.viewport_width - fli.width : 0phx;
    horizontal_page_size: fli.width;

    fli := Flickable {
        x: root.native_padding_left;
        width: root.width - root.native_padding_left - root.native_padding_right;
        y: root.native_padding_top;
        height: root.height - root.native_padding_top - root.native_padding_bottom;

        @children
        interactive: false;
        viewport_y <=> root.vertical_value;
        viewport_x <=> root.horizontal_value;
        viewport_height: 1000px;
        viewport_width: 1000px;
    }
}

export ListView := ScrollView {
    @children
}

export StandardListView := ListView {
    property<[StandardListViewItem]> model;
    property<int> current_item: -1;
    for item[i] in model : NativeStandardListViewItem {
        item: item;
        index: i;
        height: 20px;
        width: parent.visible_width;
        is_selected: current_item == i;
        TouchArea {
            width: parent.width;
            height: parent.height;
            clicked => { current_item = i; }
        }
    }
}


export ComboBox := NativeComboBox {
    property <[string]> model;
    property <int> current_index : -1;
    enabled: true;
    open_popup => { popup.show(); }

    popup := PopupWindow {
        // FIXME: the popup should have a native background
        Rectangle {
            background: lightgray;
            width: 100%;
            height: 100%;
        }
        y: root.height;
        width: root.width;
        VerticalLayout {
            spacing: 0px;
            for value[i] in root.model: NativeStandardListViewItem {
                item: { text: value };
                is_selected: current_index == i;
                VerticalLayout {  // FIXME: ideally this layout shouldn't be required
                    TouchArea {
                        height: 25px;
                        clicked => {
                            if (root.enabled) {
                                current_index = i;
                                current_value = value;
                            }
                            //is_open = false;
                        }
                    }
                }
            }
        }
    }
}