import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    id: window
    visible: true
    width: 500; height: 700
    flags: Qt.ExpandedClientAreaHint | Qt.NoTitleBarBackgroundHint

    property bool isLightTheme: false

    property color myStatusbarColor: isLightTheme? "lightGrey" : "darkGreen"
    property color myTextColor: isLightTheme? "black" : "white"

    Component.onCompleted: {
        themeForStatusbar()
    }
    function themeForStatusbar() {
        // not working on android for light statusbar - theme
        // for dark statusbar - theme on android start app and
        // rotate one time manually force and back
        // to get the white text in statusbar
        if(isLightTheme) {
            Application.styleHints.colorScheme = Qt.ColorScheme.Light
        } else {
            Application.styleHints.colorScheme = Qt.ColorScheme.Dark
        }
    }

    background: Rectangle {
        gradient: Gradient.PremiumWhite
    }

    header: ToolBar {
        background: Rectangle {
            color: myStatusbarColor
            //gradient: Gradient.PremiumDark
            //opacity: 0.7
        }
        RowLayout {
            anchors.fill: parent
            Text {
                text: "🎾 Throw Ball"; color: myTextColor; font.pointSize: 18
                Layout.margins: 10
            }
            Text {
                text: "Give Bone 🦴"; color: myTextColor; font.pointSize: 18
                Layout.alignment: Qt.AlignRight; Layout.margins: 10
            }

        }
    } // header

    topPadding: 0
    leftPadding: 0
    rightPadding: 0
    bottomPadding: 0

    ListView {
        id: listView
        anchors.fill: parent
        model: 10
        delegate: Image {
            required property int index
            width: listView.width; height: 250
            source: "https://placedog.net/500/250?id=" + (index + 1)
            fillMode: Image.PreserveAspectCrop
        }

        topMargin: SafeArea.margins.top
        onTopMarginChanged: {
            // Keep content position stable
            if (!dragging && atYBeginning)
                contentY = -topMargin
        }

        leftMargin: SafeArea.margins.left
        rightMargin: SafeArea.margins.right
        bottomMargin: SafeArea.margins.bottom


        Rectangle {
            id: textRect
            z: 2
            color: "white"
            anchors.centerIn: parent
            width: parent.width-window.SafeArea.margins.left-window.SafeArea.margins.right
            height: 100
            Text {
                id: safeAreaText
                width: parent.width / 2
                anchors.top: parent.top
                anchors.topMargin: 10
                anchors.left: parent.left
                anchors.leftMargin: 10
                text: "Safe Area Margins\nTop: "+window.SafeArea.margins.top+" Left: "
                      +window.SafeArea.margins.left+"\nRight: "
                      +window.SafeArea.margins.right+" Bottom: "
                      +window.SafeArea.margins.bottom
            } // safeAreaText

            Button {
                id: toggleColorButton
                anchors.top: parent.top
                anchors.topMargin: 10
                anchors.left: safeAreaText.right
                anchors.leftMargin: 20
                text: "toggle color"
                onClicked: {
                    isLightTheme = !isLightTheme
                    // cannot change scheme for statusbar on-the-fly on Android
                    themeForStatusbar()
                }
            } // toggleColorButton

        } // textRect

    } // listView


} // window