import Quickshell
import Quickshell.Io
import QtQuick
import QtQuick.Layouts
import Quickshell.Widgets
import QtQuick.Effects
// import playbutton.svg

Item {
    id: root
    Layout.fillHeight: true
    implicitWidth: hi.width

    visible: Player.activePlayer.canPlay()


    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onEntered: event => {
            audioPopup.visible = true;
        }
        onExited: event => {
            audioPopup.visible = false;
        }
    }
    Image {
        source: Player.activePlayer.trackArtUrl;
        anchors.fill: parent
        fillMode: Image.PreserveAspectCrop

        layer.enabled: true
        layer.effect: MultiEffect {
            blur: 0.3
            blurEnabled: true
        }
    }
    // parent.aaaaa: false
    RowLayout {
        id: hi
        Item {
            implicitHeight: 30;
            implicitWidth: 30;
            IconImage {
                implicitSize: 30;
                source: "root:skip_next";
                scale: -1
            }
            MouseArea {
                anchors.fill: parent
                onPressed: event => {
                    Player.activePlayer.previous();
                }
            }
        }
        Item {
            implicitHeight: 30;
            implicitWidth: 30;
            IconImage {
                implicitSize: 30;
                source: !Player.activePlayer.isPlaying ? "root:playbutton.svg" : "root:pausebutton.svg";
            }
            MouseArea {
                anchors.fill: parent
                hoverEnabled: false
                onPressed: event => {
                    Player.activePlayer.togglePlaying();
                    // console.debug("" + Player.activePlayer.)
                }
            }
            // PopupAnchor {}
        }

        Item {
            implicitHeight: 30;
            implicitWidth: 30;
            IconImage {
                implicitSize: 30;
                source: "root:skip_next";
            }
            MouseArea {
                anchors.fill: parent
                onPressed: event => {
                    Player.activePlayer.next();
                }
            }
        }
    }
    PopupWindow {
        id: audioPopup
        color: "transparent"
        anchor {
            item: root
        }
        anchor.rect.x: root.width / 2 - width / 2
        anchor.rect.y: root.height * 1.2
        height: 350
        width: 300
        Rectangle {
            anchors.fill: parent
            color: "#919191"
            ColumnLayout {
                anchors.centerIn: parent
                Item {
                    width: coverImg.width
                    height: coverImg.height
                    Image {
                        id: coverImg
                        anchors.fill: parent
                        source: Player.activePlayer.trackArtUrl;
                        width: 275
                        height: 275
                        fillMode: Image.PreserveAspectCrop
                    }
                }
                Text {
                    text: Player.activePlayer.trackTitle
                    color: "white"
                    font.pointSize: 10.75
                }
                Text {
                    text: Player.activePlayer.trackArtist
                    color: "white"
                    font.pointSize: 10.75
                }
            }
        }
    }
}