/* LICENSE BEGIN
    This file is part of the SixtyFPS Project -- https://sixtyfps.io
    Copyright (c) 2021 Olivier Goffart <olivier.goffart@sixtyfps.io>
    Copyright (c) 2021 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 */
import { ScrollView, Button, CheckBox, SpinBox, Slider, GroupBox, LineEdit, StandardListView,
    ComboBox, HorizontalBox, VerticalBox, GridBox, TabWidget, TextEdit, AboutSixtyFPS } from "sixtyfps_widgets.60";

App := Window {
    preferred-width: 500px;
    preferred-height: 600px;
    title: "SixtyFPS Gallery";
    icon: @image-url("../../vscode_extension/extension-logo.png");

    VerticalBox {
        HorizontalBox {
            Text {
                text: "Below are some of the standard widgets that application developers can easily re-use.";
                wrap: word-wrap;
            }

            VerticalLayout {
                alignment: start;
                disable-toggle := CheckBox {
                    checked: false;
                    text: "Disable Widgets";
                }
            }
        }

        TabWidget {
            Tab {
                title: "Controls";
                VerticalBox {
                    alignment: start;
                    HorizontalBox {
                        alignment: start;
                        GroupBox {
                            title: "Button";
                            enabled: !disable-toggle.checked;

                            Button {
                                text: "Regular Button";
                                enabled: !disable-toggle.checked;
                            }
                        }

                        GroupBox {
                            title: "Button with Icon";
                            enabled: !disable-toggle.checked;

                            Button {
                                text: "Regular Button";
                                icon: @image-url("thumbsup.png");
                                enabled: !disable-toggle.checked;
                            }
                        }

                        GroupBox {
                            title: "CheckBox";
                            enabled: !disable-toggle.checked;
                            checkbox := CheckBox {
                                text: checkbox.checked ? "(checked)" : "(unchecked)";
                                checked: true;
                                enabled: !disable-toggle.checked;
                            }
                        }
                    }

                    HorizontalBox {
                        alignment: start;
                        GroupBox {
                            title: "SpinBox";
                            enabled: !disable-toggle.checked;
                            SpinBox {
                                value: 42;
                                enabled: !disable-toggle.checked;
                            }
                        }

                        GroupBox {
                            title: "ComboBox";
                            enabled: !disable-toggle.checked;
                            ComboBox {
                                model: ["Select Something", "From this", "Combobox"];
                                enabled: !disable-toggle.checked;
                            }
                        }
                    }

                    GroupBox {
                        title: "Slider";
                        enabled: !disable-toggle.checked;
                        Slider {
                            value: 42;
                            enabled: !disable-toggle.checked;
                        }
                    }

                    GroupBox {
                        title: "LineEdit";
                        enabled: !disable-toggle.checked;
                        LineEdit {
                            placeholder-text: "Enter some text";
                            enabled: !disable-toggle.checked;
                        }
                    }
                }
            }
            Tab {
                title: "List View";
                GroupBox {
                    title: "StandardListView";
                    enabled: !disable-toggle.checked;
                    StandardListView {
                        model: [
                            {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},
                            {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},
                            {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},
                            {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},
                            {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},
                            {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},
                            {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},
                        ];
                    }
                }
            }
            Tab {
                title: "TextEdit";
                VerticalLayout {
                    GroupBox {
                        title: "Word-Wrap";
                        te1 := TextEdit {
                            text: "This is our TextEdit widget, which allows for editing text that spans over multiple paragraphs.\nFor example this line starts in a new paragraph.\n\nWhen the amount of lines - due to wrapping and number of paragraphs - exceeds the available vertical height, a vertical scrollbar is shown that allows scrolling.\nYou may want to enter a bit of text here then in order to make them visible.";
                            wrap: word-wrap;
                            enabled: !disable-toggle.checked;
                        }
                    }
                     GroupBox {
                        title: "No-Wrap";
                        TextEdit {
                            text <=> te1.text;
                            wrap: no-wrap;
                            enabled: !disable-toggle.checked;
                        }
                    }
                }
            }
            Tab {
                title: "About";
                HorizontalBox {
                    alignment: center;
                    AboutSixtyFPS {
                    }
                }
            }
        }
    }
}