import QtQuick
import QtQuick.Window
import NomadInput 1.0

QtObject {
    property Window topWindow: Window {
        width: 960
        height: 540
        visible: true
        title: "nomad-top"
        property string lastInputText: "none"

        Connections {
            target: inputManager
            
            function onActionPressed(action) {
                topWindow.lastInputText = inputManager.actionName(action) + " pressed"
            }
            function onActionReleased(action) {
                topWindow.lastInputText = inputManager.actionName(action) + " released"
            }
        }

        Rectangle {
            anchors.fill: parent
            color: "#181818"

            Column {
                anchors.centerIn: parent
                spacing: 20

                Text {
                    text: "nomad top screen"
                    color: "white"
                    font.pixelSize: 50
                }

                Text {
                    text: "last input: " + topWindow.lastInputText
                    color: "white"
                    font.pixelSize: 30
                }
            }
        }
    }

    property Window bottomWindow: Window {
        width: 620
        height: 540
        visible: true
        title: "nomad-bottom"

        readonly property var mainMenuNavRegions: ({
            DockMenu: 0,
            GamesList: 1,
            Count: 2
        })

        property int focusRegion: bottomWindow.mainMenuNavRegions.GamesList
        property int dockMenuIndex: 0

        NavigationManager {
            id: navigationManager
            rootItem: bottomRoot
        }

        Connections {
            target: inputManager

            function onActionPressed(action) {
                switch (action) {
                case InputManager.Up:
                case InputManager.Down:
                case InputManager.Left:
                case InputManager.Right:
                    navigationManager.move(action)
                    break
                }
            }
        }


        Rectangle {
            id: bottomRoot
            anchors.fill: parent
            color: "#181818"

            Text {
                anchors.top: parent.top
                anchors.topMargin: 30
                anchors.horizontalCenter: parent.horizontalCenter

                text: "top placeholder"
                color: "white"
                font.pixelSize: 24
            }

            ListView {
                id: gamesList

                anchors.left: parent.left
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter

                height: 140

                orientation: ListView.Horizontal 
                preferredHighlightBegin: 200
                preferredHighlightEnd: 420
                highlightRangeMode: ListView.ApplyRange
                spacing: 20

                model: 20

                Component.onCompleted: {
                    if (currentItem) {
                        navigationManager.focusItem(currentItem)
                    }
                }

                delegate: Rectangle {
                    id: gameTile

                    width: 110
                    height: 110

                    color: navigationManager.currentItem === gameTile ? "blue" : "white"

                    function navFocus() {
                        gamesList.currentIndex = index 
                    }

                    Component.onCompleted: {
                        navigationManager.registerItem(gameTile)
                    }

                    Component.onDestruction: {
                        navigationManager.unregisterItem(gameTile)
                    }

                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            navigationManager.focusItem(gameTile)
                        }
                    }
                }
            }

            Row {
                id: bottomMenu

                anchors.bottom: parent.bottom
                anchors.bottomMargin: 30
                anchors.horizontalCenter: parent.horizontalCenter

                spacing: 16

                Repeater {
                    id: dockRepeater
                    model: 5

                    Rectangle {
                        id: dockButton

                        width: 60
                        height: 60

                        color: navigationManager.currentItem === dockButton ? "blue" : "white"

                        function navFocus() {
                            bottomWindow.dockMenuIndex = index 
                        }

                        Component.onCompleted: {
                            navigationManager.registerItem(dockButton)
                        }

                        Component.onDestruction: {
                            navigationManager.unregisterItem(dockButton)
                        }

                        MouseArea {
                            anchors.fill: parent

                            onClicked: {
                                navigationManager.focusItem(dockButton)
                            }
                        }
                    }
                }
            }
        } 
    }
}