import QtQuick 6.8
import QtMultimedia 6.8
import QtQuick.Controls 6.8
import QtQuick.Layouts 6.8

import QYRComponents 1.0

Rectangle {
    visible: Player.active
    color: Colors.surface1
    radius: 10

    property bool unrolled: true

    // width: childrenRect.width
    height: unrolled ? 560 : 96

    MouseArea {
        anchors.fill: parent
        height: 20
        hoverEnabled: true
        propagateComposedEvents: true

        onClicked: unrolled = true;
        onContainsMouseChanged: function() {
            if (!containsMouse) {
                unrolled = false;
            }
        }
    }

    ColumnLayout {
        anchors.fill: parent

        Item {
            visible: unrolled
            Layout.fillHeight: true
        }

        RowLayout {
            Button {
                text: Player.loading ? "Loading" : (Player.playing ? "Pause" : "Play")
                enabled: !Player.loading
                onClicked: function() {
                    if (Player.playing) {
                        Player.pause()
                    } else {
                        Player.play();
                    }
                }
            }

            Button {
                text: "Stop"
                onClicked: Player.stop()
            }

            Label {
                heading: "h4"
                text: new Date(Player.position).toISOString().slice(14, 19)
            }


            Slider {
                Layout.fillWidth: true
                from: 0
                to: Player.duration
                value: Player.position
                buffered: Player.buffered
                onMoved: Player.position = value
            }

            Label {
                heading: "h4"
                text: new Date(Player.duration).toISOString().slice(14, 19)
            }

            Label {
                text: Player.buffered
            }

            Slider {
                from: 0
                to: 1
                value: Player.volume
                onMoved: Player.volume = value
            }
        }

        Label {
            Layout.fillWidth: true
            wrapMode: Text.WordWrap
            clip: true
            text: Player.title
            heading: "h2"
            font.bold: true
        }

        Label {
            visible: unrolled
            Layout.fillWidth: true
            wrapMode: Text.WordWrap
            clip: true
            text: Player.description
            heading: "h4"
            font.bold: true
        }
    }
}