import QtQuick 6.8
import QtQuick.Controls 6.8
import QtQuick.Controls.Basic 6.8
import QtQuick.Layouts 6.8
import QYRComponents 1.0

ColumnLayout {
    Layout.alignment: Qt.AlignVCenter
    Layout.fillWidth: true

    property var index: null

    Label {
        Layout.fillWidth: true
        Layout.bottomMargin: 20
        text: index != null ? Player.streams[index].name : "Invalid station"
        heading: "h2"
        horizontalAlignment: Text.AlignHCenter
    }

    Label {
        Layout.fillWidth: true
        text: "Title: " + (index != null ? Player.streams[index].title : "")
        heading: "h3"
        horizontalAlignment: Text.AlignHCenter
    }

    Label {
        Layout.fillWidth: true
        text: "Listeners: " + (index != null ? Player.streams[index].listeners : 0)
        heading: "h3"
        horizontalAlignment: Text.AlignHCenter
    }

    Label {
        Layout.topMargin: 20
        text: (Player.currentIndex != null && Player.currentIndex != parent.index) ? qsTr("Another station is currently playing") : ""
        heading: "h2"
        horizontalAlignment: Text.AlignHCenter
    }

    RowLayout {
        Layout.fillWidth: false
        Layout.alignment: Qt.AlignHCenter
        width: 220
        
        Button {
            Layout.rightMargin: 5
            text: Player.loading ? "Loading" : (Player.playing ? "Pause" : "Play")

            onClicked: function() {
                if (Player.playing) {
                    Player.stopPlaying();
                } else {
                    Player.startPlaying(parent.parent.index);
                }
            }
        }

        Slider {
            Layout.fillWidth: true
            Layout.leftMargin: 5
            from: 0.1
            to: 1.1
            stepSize: 0.05
            value: Player.volume + 0.1
            onMoved: Player.volume = value - 0.1
        }
    }

    Item {
        Layout.fillHeight: true
    }
}