import QtQuick 2.0
import QtMultimedia 5.8
import QtQuick.Controls 2.2
import QtQuick.Controls.Material 2.2

Rectangle {
    anchors.fill: parent

    Image {
        source: 'images/backdrop.jpg'
        anchors.fill: parent
    }

    Rectangle {
        id: logo

        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 20

        color: Qt.rgba(1, 1, 1, 0.5)

        width: parent.width
        height: logoImage.height

        Image {
            id: logoImage
            source: 'images/logo.png'
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }

    Column {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        width: parent.width
        spacing: 10

        MenuButton {
            buttonText: "New Game"
            function actionOnClick() {
                appPage.source = "Board.qml"
            }
        }

        MenuButton {
            buttonText: "Open Game"
            enabled: false
        }

        MenuButton {
            buttonText: "Save Game"
            enabled: false
            function actionOnClick() {
                pingSound.seek(0)
                pingSound.play()
            }

            // From: https://freesound.org/people/edsward/sounds/341871/
            Audio {
                id: pingSound
                source: 'assets/ping.wav'
                autoLoad: true
            }
        }

        MenuButton {
            buttonText: "About justCheckers"
        }

        MenuButton {
            buttonText: "Settings"
        }

        Button {
            anchors.horizontalCenter: parent.horizontalCenter
            width: parent.width - 50
            height: parent.parent.height * 0.1
            text: "Quit"
            onPressed: Qt.quit()
            Material.accent: Material.Orange
        }

        MenuButton {
            buttonText: "Quit"
            function actionOnClick() {
                Qt.quit()
            }
        }
    }

    Rectangle {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 20

        color: Qt.rgba(1, 1, 1, 0.5)
        width: parent.width
        height: 20

        Text {
            text: "v" + appVersion
            anchors.verticalCenter: parent.verticalCenter
            anchors.right: parent.right
            anchors.rightMargin: 20
        }
    }
}