import QtQuick 2.15
import QtQuick.Layouts 1.11
import QtQuick.Controls 2.12
import org.kde.plasma.components 3.0 as PlasmaComponents
import org.kde.plasma.core 2.0 as PlasmaCore
import QtGraphicalEffects 1.0

RowLayout {
    id: fullView
    focus: true

    // loading fonts

     FontLoader {
        id: antonio_Bold
        source: "../fonts/Antonio-Bold.ttf"
    }
    FontLoader {
        id: aller_Lt
        source: "../fonts/Aller_Lt.ttf"
    }
    FontLoader {
        id: aller_Bd
        source: "../fonts/Aller_Bd.ttf"
    }

    Keys.onReleased: {
        if (!event.modifiers) {
            event.accepted = true
            if (event.key === Qt.Key_Space || event.key === Qt.Key_K) {
                root.mediaToggle()
            } else if (event.key === Qt.Key_P) {
                root.mediaPrev()
            } else if (event.key === Qt.Key_N) {
                root.mediaNext()
            } else {
                event.accepted = false
            }
        }
    }
    RowLayout {
        Layout.fillWidth: true
        Layout.maximumWidth: fullView.width
        Layout.fillHeight: true
        Layout.maximumHeight: 190
        ColumnLayout {
        id: leftWidget
        Layout.fillWidth: false
        width: 100
        Layout.fillHeight: true
        Item {
            width: 91
            height: 91
                        Rectangle {
            anchors.centerIn: parent
            id: mask
            width: parent.width
            height: parent.height
            visible: false
            color: "transparent"
            Rectangle {
                anchors.centerIn: parent
                width: parent.width*.90
                height: parent.height*.90
                color: "black"
                radius: width/2
            }
            }
            Rectangle {
            visible: mediaSource.track
            id: backgroundCover
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            width: parent.width
            height: parent.height
            radius: width/2
            color: "white"
            }
            Image {
              visible: mediaSource.track
              id: coverImage
              anchors.horizontalCenter: parent.horizontalCenter
              anchors.verticalCenter: parent.verticalCenter
              width: parent.width
              height: parent.height
              source: mediaSource.albumArt ? mediaSource.albumArt : "../images/.face.icon"
              fillMode: Image.PreserveAspectCrop
              layer.enabled: true
                        layer.effect: OpacityMask {
                            maskSource: mask
                        }
                  }

            MouseArea {
        // Layout.alignment: Qt.AlignRight
        id: mediaControlsMouseArea
        height: title.height
        Layout.fillWidth: true
        anchors.bottom: parent.bottom
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
        hoverEnabled: true
                RowLayout {
                id: mediaControls
                opacity: mediaControlsMouseArea.containsMouse
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
                Behavior on opacity {
                    PropertyAnimation {
                        easing.type: Easing.InOutQuad
                        duration: 250
                    }
                }
                Button {
                    Layout.preferredWidth: fullwidget.height/2
                    Layout.preferredHeight: fullwidget.height/1.5
                    contentItem: PlasmaCore.IconItem {
                        source: "media-skip-backward"
                    }
                    padding: 0
                    background: null
                    onClicked: {
                        root.mediaPrev()
                        console.log("prev clicked")
                    }
                }
                Button {
                    Layout.preferredWidth: fullwidget.height/2
                    Layout.preferredHeight: fullwidget.height/1.5
                    id: playButton
                    contentItem: PlasmaCore.IconItem {
                        source: mediaSource.playbackStatus
                                === "Playing" ? "media-playback-start" : "media-playback-pause"
                    }
                    padding: 0
                    background: null
                    onClicked: {
                        root.mediaToggle()
                        console.log("pause clicked")
                    }
                }
                Button {
                    Layout.preferredWidth: fullwidget.height/2
                    Layout.preferredHeight: fullwidget.height/1.5
                    contentItem: PlasmaCore.IconItem {
                        source: "media-skip-forward"
                    }
                    onClicked: {
                        root.mediaNext()
                        console.log(mediaSource.playbackStatus)
                        console.log("next clicked")
                    }
                    padding: 0
                    background: null
                }
            }
                }
        }
        }
    ColumnLayout {
        Layout.fillWidth: true
        id: fullwidget
        PlasmaComponents.Label {
            id: title
            text: mediaSource.track
            Layout.fillWidth: true
            font.pixelSize: 20
            font.family: aller_Bd.name
            // color: "red"
            lineHeight: 0.8
            font.bold: true
            elide: Text.ElideRight
        }

        PlasmaComponents.Label {
            font.family: aller_Lt.name
            Layout.maximumWidth: 300
            Layout.fillWidth: true
            text: mediaSource.artist
            font.pixelSize: 16
            // color: "red"
            lineHeight: 0.8
            elide: Text.ElideRight
        }


    }
    }
}