import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Effects
import QtQuick.Shapes
import Qt.labs.qmlmodels

import InventoryWars
import Style

Rectangle {
    id: root

    color: UIStyle.background

    required property SqlLeaderboardModel leaderboard
    required property ListModel rounds
    property QtObject selectedRound: rounds.get(0)
    property bool selected: false

    signal roundSelected()

    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 20
        spacing: 20

        Item { Layout.fillHeight: true }

        Image {
            Layout.alignment: Qt.AlignHCenter
            Layout.preferredWidth: 256

            source: "images/modules.png"
            fillMode: Image.PreserveAspectFit
        }

        Label {
            Layout.alignment: Qt.AlignHCenter

            font.pixelSize: UIStyle.fontSizeXL
            color: UIStyle.titletextColor

            text: "Start a round"
        }

        ComboBox {
            id: roundSelect

            Layout.alignment: Qt.AlignHCenter

            model: root.rounds
            textRole: "name"
        }

        Text {
            Layout.alignment: Qt.AlignHCenter

            font.pixelSize: UIStyle.fontSizeM
            color: UIStyle.textColor
            visible: root.selected

            text: "Last selected: " + selectedRound.name
        }

        Button {
            Layout.alignment: Qt.AlignHCenter

            buttonColor: UIStyle.highlightColor
            buttonBorderColor: UIStyle.highlightBorderColor
            textColor: UIStyle.textColor

            text: "Start"

            onClicked: {
                root.selectedRound = rounds.get(roundSelect.currentIndex)
                root.selected = true
                roundSelected()
            }
        }

        ColumnLayout {
            Layout.fillHeight: true
            Layout.fillWidth: true
            spacing: -1

            visible: leaderboard.hasRow

            Label {
                Layout.alignment: Qt.AlignHCenter
                padding: 10

                font.pixelSize: UIStyle.fontSizeL
                color: UIStyle.titletextColor

                text: "Leaderboard"
            }

            HorizontalHeaderView {
                Layout.fillWidth: true
                syncView: tableView
                clip: true
                columnSpacing: -1
                rowSpacing: -1
                boundsBehavior: Flickable.StopAtBounds

                rowHeightProvider: function (row) {
                    return 35
                }

                delegate: Rectangle {
                    border.width: 1
                    color: "#f1f1f1"

                    Text {
                        anchors.centerIn: parent
                        font.bold: true
                        text: display
                    }
                }
            }

            TableView {
                id: tableView

                Layout.fillHeight: true
                Layout.fillWidth: true
                clip: true
                columnSpacing: -1
                rowSpacing: -1
                boundsBehavior: Flickable.StopAtBounds

                model: leaderboard

                columnWidthProvider: function (column) {
                    if (column === 0)
                        return tableView.width * 0.6
                    return tableView.width * 0.4
                }
                rowHeightProvider: function (row) {
                    return 35
                }

                onWidthChanged: tableView.forceLayout()

                delegate: Rectangle {
                    border.width: 1

                    Text {
                        anchors.centerIn: parent
                        text: display
                    }
                }
            }
        }



        Item { Layout.fillHeight: true }
    }
}