import QtQuick
import QtQuick.Window
import QtQuick.Layouts

Window {
    SystemPalette { id: systemColors; colorGroup: SystemPalette.Active }

    id: root
    width: 640
    height: 480
    visible: true

    title: qsTr("Jukebox")

    Rectangle {
        id: topbar

        anchors {
            top: parent.top
            left: parent.left
            right: parent.right
        }

        height: 50
        color: systemColors.window
    }

    Rectangle {
        id: mainSection

        anchors {
            top: topbar.bottom
            bottom: bottomBar.top
            left: parent.left
            right: parent.right
        }

        color: systemColors.window

        AudioInfoBox {
            id: firstSong

            anchors {
                verticalCenter: parent.verticalCenter
                left: parent.left
                right: parent.right
                margins: 20
            }

            songIndex: 0
            title: "The Record"
            authorName: "Boygenius"
            imageSource: "Assets/Images/Boygenius_-_the_record.jpg"
        }

        AudioInfoBox {
            id: secondSong

            anchors {
                verticalCenter: parent.verticalCenter
                left: parent.left
                right: parent.right
                margins: 20
            }

            songIndex: 1
            title: "Desire, I Want to Turn Into You"
            authorName: "Caroline Polachek"
            imageSource: "Assets/Images/Boygenius_-_the_record.jpg"
        }

        AudioInfoBox {
            id: thirdSong

            anchors {
                verticalCenter: parent.verticalCenter
                left: parent.left
                right: parent.right
                margins: 20
            }

            songIndex: 2
            title: "Softscars"
            authorName: "Yeule"
            imageSource: "Assets/Images/Boygenius_-_the_record.jpg"
        }

    }

    Rectangle {
        id: bottomBar

        anchors {
            bottom: parent.bottom
            left: parent.left
            right: parent.right
        }

        height: 100
        color: systemColors.window


        ImageButton {
            id: previousButton

            anchors {
                verticalCenter: parent.verticalCenter
                horizontalCenter: parent.horizontalCenter
                horizontalCenterOffset: -70
            }

            source: "Assets/Images/Boygenius_-_the_record.jpgg"

            onClicked: playerController.switchToPreviousSong()
        }

        ImageButton {
            id: playPauseButton

            anchors.centerIn: parent

            source: playerController.playing ? "Assets/Images/Boygenius_-_the_record.jpg" : "Assets/Images/Boygenius_-_the_record.jpg"

            onClicked: playerController.playPause()
        }

        ImageButton {
            id: nextButton

            anchors {
                verticalCenter: parent.verticalCenter
                horizontalCenter: parent.horizontalCenter
                horizontalCenterOffset: 70
            }

            source: "Assets/Images/Boygenius_-_the_record.jpg"

            onClicked: playerController.switchToNextSong()
        }
    }

    QtObject {
        id: playerController

        property int currentSongIndex: 0
        property int songCount: 4
        property bool playing: true

        function playPause() {
            playing = !playing
            if (playing) {
                fourthSong.video.play()
            } else {
                fourthSong.video.pause()
            }
        }

        function switchToNextSong() {
            currentSongIndex =  (currentSongIndex + 1) % songCount
            console.log(currentSongIndex)
        }

        function switchToPreviousSong() {
            if (currentSongIndex == 0) currentSongIndex = songCount;
            currentSongIndex =  (currentSongIndex - 1) % songCount
            console.log(currentSongIndex)
        }
    }
}