import QtQuick
import Qt.labs.platform
import Gallery
import DesignSystem
import QtQuick.Layouts
import QtQuick.Controls.Basic
import QtQuick.Dialogs

AppWindow {
    id: window
    width: 640
    height: 480
    visible: true
    title: qsTr("flowy - gallery")
    ScrollView {
        anchors.fill: parent
        ColumnLayout {
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.margins: 10

            AppLogo {}

            Row {
                spacing: 5

                AppSecondaryButton {
                    text: "Secondary"
                }
                AppGhostButton {
                    text: "Ghost"
                }
                AppIconButton {
                    source: "qrc:/live.flowy/imports/DesignSystem/app-icons/safari.svg"
                    useOriginalColor: true
                }
                AppIconButton {
                    source: "qrc:/live.flowy/imports/DesignSystem/icons/terminal-duotone.svg"
                }
            }

            AppCard {
                Column {
                    spacing: 10
                    AppText {
                        text: "This is a card"
                    }
                    AppCaption {
                        text: "Caption"
                    }
                    AppHeadline {
                        text: "Headline"
                    }
                    AppSubHeadline {
                        text: "SubHeadline"
                    }
                    AppLabel {
                        text: "Label"
                    }
                }
            }

            Switch {}

            AppSecondaryButton {
                text: "Open message dialog"
                onClicked: {
                    messageDialog.open();
                }
            }

            MessageDialog {
                id: messageDialog
                buttons: MessageDialog.Ok
                text: "The document has been modified."
            }

            AppComboBox {
                model: ListModel {
                    id: model
                    ListElement {
                        text: "Banana"
                    }
                    ListElement {
                        text: "Apple"
                    }
                    ListElement {
                        text: "Coconut"
                    }
                }
                onAccepted: {
                    if (find(editText) === -1)
                        model.append({
                            text: editText
                        });
                }
            }

            AppTextField {
                placeholderText: qsTr("Enter name")
            }

            AppLink {
                text: "flowy.live"
                onClicked: {
                    Qt.openUrlExternally("https://flowy.live");
                }
            }

            AppImage {
                source: "https://storage.googleapis.com/flowy-assets/keypad/jr-korpa-9XngoIpxcEo-unsplash.jpg"
                fillMode: Image.PreserveAspectCrop
                height: 100
                width: 100
                radius: 20
            }

            AppWarning {
                Layout.fillWidth: true
            }

            AppMenu {
                id: menu

                Action {
                    text: qsTr("Tool Bar")
                    checkable: true
                }
                Action {
                    text: qsTr("Side Bar")
                    checkable: true
                    checked: true
                }
                Action {
                    text: qsTr("Status Bar")
                    checkable: true
                    checked: true
                }

                MenuSeparator {}

                Action {
                    text: "Hello"
                }

                // NOTE: MenuItem is not recommended as it isn't consistent with the menu theming. Please use Action until a fix is made.
            }
            AppIcon {
                source: "qrc:/live.flowy/imports/DesignSystem/icons/sidebar-duotone.svg"
            }
            AppSecondaryButton {
                onClicked: menu.open()
                text: "Open menu"
            }

            Row {
                AppText {
                    text: "duotone"
                }
                AppIcon {
                    source: "qrc:/live.flowy/imports/DesignSystem/anronicons/duotone/basic/bookmark.svg"
                    color: "green"
                }
            }
            Row {
                AppText {
                    text: "duocolor"
                }
                AppIcon {
                    source: "qrc:/live.flowy/imports/DesignSystem/anronicons/duocolor/basic/bookmark.svg"
                    color: "green"
                }
            }
            Row {
                AppText {
                    text: "mono"
                }
                AppIcon {
                    source: "qrc:/live.flowy/imports/DesignSystem/anronicons/mono/basic/bookmark.svg"
                    color: "green"
                }
            }
            Row {
                AppText {
                    text: "gestalt"
                }
                AppIcon {
                    source: "qrc:/live.flowy/imports/DesignSystem/anronicons/gestalt/basic/bookmark.svg"
                    color: "green"
                }
            }
            Row {
                AppText {
                    text: "line"
                }
                AppIcon {
                    source: "qrc:/live.flowy/imports/DesignSystem/anronicons/line/basic/bookmark.svg"
                }
            }
            Row {
                AppText {
                    text: "filled"
                }
                AppIcon {
                    source: "qrc:/live.flowy/imports/DesignSystem/anronicons/filled/basic/bookmark.svg"
                    color: "green"
                }
            }
        }
    }
}