import QtQml
import QtQuick
import Quickshell
import QtQuick.Layouts
import QtQuick.Controls
import Quickshell.Services.Mpris

PopupWindow {
    property PlayerControllerV2 player: PlayerControllerV2;

    id: audioPopup
    anchor {
        item: root
    }
    anchor.rect.x: root.width / 2 - width / 2
    anchor.rect.y: root.height * 1.2
    height: columnContainer.height + 5
    width: 425
    Rectangle {
        anchors.fill: parent
        color: "#919191"
        ColumnLayout {
            id: columnContainer
            anchors.centerIn: parent
            Repeater {
                model: player.mpris.players
                Item {
                    id: root
                    width: 400
                    height: 80
                    required property MprisPlayer modelData
                    property string trackPosition: PlayerControllerV2.trackPositionFormatter(root.modelData.position)
                    property string trackLength: "0:00"
                    Rectangle {
                        id: background
                        anchors.fill: parent
                        color: "black"
                        radius: 7
                    }
                    MouseArea {
                        anchors.fill: parent
                        onClicked: event => {
                            audioPopup.player.setActivePlayer(root.modelData);
                            audioPopup.player.update();
                        }
                    }
                    ColumnLayout {
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.horizontalCenter: parent.horizontalCenter
                        Layout.alignment: Qt.AlignHCenter
                        width:380
                        RowLayout {
                            implicitWidth: 380
                            Item {
                                implicitWidth: 50
                                implicitHeight: 50
                                Image {
                                    anchors.fill: parent
                                    source: root.modelData.trackArtUrl
                                }
                            }
                            ColumnLayout {
                                spacing: 2
                                ScrollView {
                                    implicitWidth: 230
                                    height: parent.height

                                    Text {
                                        text: root.modelData.trackTitle
                                        color: "white"
                                        font.pointSize: 11
                                        antialiasing: true
                                    }
                                }
                                Text {
                                    text: root.modelData.trackArtist
                                    color: "white"
                                    font.pointSize: 6
                                    antialiasing: true
                                }
                            }
                            Rectangle { // Spacer
                                color: "transparent"
                                Layout.fillWidth: true
                            }
                            RowLayout {
                                Layout.alignment: Qt.AlignRight
                                spacing: 0
                                // buttons
                                Item {
                                    width: 30
                                    height: 25
                                    Rectangle {
                                        id: gobackButton
                                        width: 30
                                        height: 25
                                        topLeftRadius: 7
                                        bottomLeftRadius: 7
                                        color: "white"
                                    }
                                    MouseArea {
                                        anchors.fill: parent
                                        hoverEnabled: true
                                        onEntered: event => {
                                            gobackButton.color = "grey"
                                        }
                                        onExited: event => {
                                            gobackButton.color = "white"
                                        }
                                    }
                                }
                                Item {
                                    width: 30
                                    height: 25
                                    Item {
                                        width: 30
                                        height: 25
                                        Rectangle {
                                            id: pauseButton
                                            width: 30
                                            height: 25
                                            // topLeftRadius: 7
                                            // bottomLeftRadius: 7
                                            color: "white"
                                        }
                                    }
                                    MouseArea {
                                        // id: pauseButton
                                        anchors.fill: parent
                                        hoverEnabled: true
                                        onEntered: event => {
                                            pauseButton.color = "grey"
                                        }
                                        onExited: event => {
                                            pauseButton.color = "white"
                                        }
                                        onClicked: event => {
                                            root.modelData.togglePlaying();
                                        }
                                    }
                                }
                                Item {
                                    width: 30
                                    height: 25
                                    Rectangle {
                                        id: gonextButton
                                        width: 30
                                        height: 25
                                        topRightRadius: 7
                                        bottomRightRadius: 7
                                        color: "white"
                                    }
                                    MouseArea {
                                        anchors.fill: parent
                                        hoverEnabled: true
                                        onEntered: event => {
                                            gonextButton.color = "grey"
                                        }
                                        onExited: event => {
                                            gonextButton.color = "white"
                                        }
                                    }
                                }
                            }
                        }
                        RowLayout {
                            Slider {
                                id: slider
                                Layout.fillWidth: true
                                from: 0
                                value: root.modelData.position
                                to: root.modelData.length
                                onMoved: event => {
                                    root.modelData.position = slider.value
                                    audioPopup.player.update(); // force values to update // causing ui to update with it
                                }
                                Timer {
                                    running: root.modelData.playbackState == MprisPlaybackState.Playing
                                    interval: 500
                                    repeat: true
                                    onTriggered: slider.value = root.modelData.position
                                }
                            }
                            Text {
                                id: positionText
                                text: trackPosition + "/" + trackLength // returns float of seconds of length
                                color: "white"
                                font.pointSize: 10
                            }
                        }
                    }
                    Timer {
                        running: root.modelData.isPlaying
                        interval: 1000
                        repeat: true
                        onTriggered: {
                            trackPosition = PlayerControllerV2.trackPositionFormatter(root.modelData.position)
                            trackLength = PlayerControllerV2.trackPositionFormatter(root.modelData.length)
                        }
                    }
                }
            }
        }
    }
}