import Quickshell
import Quickshell.Io
import QtQuick
import QtQuick.Layouts
import Quickshell.Widgets
import QtQuick.Effects
import "../common" as Common

// import playbutton.svg

    Item {
        property PlayerControllerV2 player: PlayerControllerV2;
        id: root
        Layout.fillHeight: true
        Layout.preferredWidth: mainLayout.width + 10
        Loader {
            id: audioPopupLoader
            active: true
            sourceComponent: PlayerPopupV2 {
                id: audioPopup
            }
        }
        RowLayout {
            id: mainLayout
            Layout.fillHeight: true
            anchors {
                verticalCenter: parent.verticalCenter
                horizontalCenter: parent.horizontalCenter
            }
            Common.Meow {
                id: commons
            }
            Item {
                implicitWidth: text.width
                implicitHeight: text.height
                Rectangle {
                    id: hoverColor
                    anchors.centerIn: parent
                    visible: false
                    radius: 7
                    width: parent.width + 5
                    height: parent.height + 2.5
                    color: "grey"
                }
                Text {
                    id: text
                    text: (root.player.activePlayer == undefined) ? "Nothing" : player.activePlayer.trackTitle
                    color: "white"
                    font.pointSize: 10
                    font.italic: (root.player.activePlayer == undefined) ? true : false
                }
                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true

                    onEntered: event => {
                        hoverColor.visible = true
                    }
                    onExited: event => {
                        hoverColor.visible = false
                    }
                    onClicked: event => {
                        audioPopupLoader.item.visible = !audioPopupLoader.item.visible;
                    }
                }
            }
            Common.Dot {}
            Item {
                id: mediaPositionControls
                implicitWidth: positionText.width
                implicitHeight: positionText.height
                Text {
                    id: positionText
                    text: root.player.activeTrackPositionFormated + "/" + player.activeTrackLengthFormated // returns float of seconds of length
                    color: "white"
                    font.pointSize: 10
                }
                RowLayout {
                    visible: !positionText.visible
                    // enable: !positionText.visible
                    anchors {
                        left: parent.left
                        right: parent.right
                    }
                    anchors.verticalCenter: parent.verticalCenter
                    Item {
                        width: 20
                        height: 20
                        IconImage {
                            anchors.fill: parent
                            implicitSize: 20
                            source: "root:/assets/media_player/skip_previous.svg"
                        }
                    }
                    Item {
                        width: 20
                        height: 20
                        MouseArea {
                            anchors.fill: parent
                            width: 20
                            height: 20
                            hoverEnabled: true
                            onClicked: event => {
                                root.player.activePlayer.togglePlaying()
                            }
                        }
                        IconImage {
                            anchors.fill: parent
                            implicitSize: 20
                            source: (root.player.activePlayer.isPlaying) ? "root:/assets/media_player/pausebutton.svg" : "root:/assets/media_player/playbutton.svg"
                        }
                    }
                    Item {
                        width: 20
                        height: 20
                        IconImage {
                            anchors.fill: parent
                            implicitSize: 20
                            source: "root:/assets/media_player/skip_next.svg"
                        }
                    }
                }
                MouseArea {
                    z: 1
                    id: mouseAreaMediaButtons
                    height: parent.height + 15
                    anchors.fill: parent
                    hoverEnabled: true

                    propagateComposedEvents: true // allows events to transparently go through to an overlapping mouseArea

                    onEntered: event => {
                        positionText.visible = false;
                    }
                    onExited: event => {
                        positionText.visible = true;
                    }
                }
            }
        }
        Rectangle {
            z: -1
            color: "black"
            anchors {
                verticalCenter: parent.verticalCenter
            }
            height: 25
            width: parent.width
            radius: 7
        }
    }