import QtQuick
import Quickshell
import Quickshell.Widgets
import Quickshell.Services.Mpris

Item {
    id: root
    property var player: Mpris.players.values[0]
    anchors {
        top: parent.top
        bottom: parent.bottom
    }
    width: children[1].width + 24
    Rectangle {
        anchors.fill: parent
        anchors.margins: 4
        radius: 8
        bottomRightRadius: 12
        color: hover.hovered ? "#11ffffff" : "#00ffffff"
        Behavior on color {ColorAnimation {duration: 100}}
    }
    Row {
        spacing: 12
        anchors.verticalCenter: parent.verticalCenter
        x: 12
        ClippingRectangle {
            visible: !!root.player
            anchors.verticalCenter: parent.verticalCenter
            width: 24
            height: width
            radius: 6
            Image {
                anchors.fill: parent
                source: root.player?.trackArtUrl ?? source
            }
            opacity: root.player?.isPlaying ? 1 : 0.5
            Behavior  on opacity {NumberAnimation {duration: 150}}
        }
        Text {
            anchors.verticalCenter: parent.verticalCenter
            property var clock: SystemClock {}
            color: "white"
            text: Qt.formatDateTime(clock.date, "ddd MMM dd · hh:mm")
        }
    }
    HoverHandler {id: hover}
    TapHandler {onTapped: background.index = 3}
}