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")

    ColumnLayout {
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.margins: 10

        AppLogo {}

        Row {
            spacing: 5

            AppPrimaryButton {
                text: "Toggle theme"
                onClicked: {
                    Theme.toggleTheme();
                }
            }
            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
        }
    }
}