pragma ComponentBehavior: Bound

import QtQuick
import QtQuick.Layouts
import Quickshell
import Quickshell.Services.Notifications
import Quickshell.Widgets

PanelWindow {
    id: notificationRoot

    // Since the panel's screen is unset, it will be picked by the compositor
    // when the window is created. Most compositors pick the current active monitor.

    property bool hasImage: notification?.image ? true : false

    property string image: {
        if (hasImage) {
            return notification.image;
        }
        if (notification?.appIcon === "") {
            return "";
        }
            return Quickshell.iconPath(notification?.appIcon);
    }
    property var notification: null

    signal dismissed()

    anchors.top: true
    margins.top: screen.height / 100
    exclusiveZone: 0

    implicitWidth: 400
    implicitHeight: 100
    color: "transparent"

    // An empty click mask prevents the window from blocking mouse events.

    Rectangle {
        anchors.fill: parent
        topLeftRadius: 100
        bottomLeftRadius: 100
        topRightRadius: 20
        bottomRightRadius: 20
        color: "#80000000"

        MouseArea{
            anchors.fill: parent
            onClicked: {
                notificationRoot.dismissed()
            }
        }

        RowLayout {
            anchors {
                fill: parent
            }

            ClippingRectangle {

                Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter

                implicitWidth: 100
                implicitHeight: 100
                visible: image? true : false

                color: "grey"

                radius: 100

                IconImage {
                    anchors.centerIn: parent
                    implicitSize: 100
                    source: notificationRoot.image
                }
            }

            ColumnLayout {

                Layout.leftMargin: 10
                Layout.rightMargin: 10

                Rectangle {
                    Layout.fillWidth: true

                    implicitHeight: 30
                    radius: 20
                    color: "#50ffffff"

                    Rectangle {
                        anchors {
                            left: parent.left
                            top: parent.top
                            bottom: parent.bottom
                        }

                        implicitWidth: parent.width
                        radius: parent.radius
                        color: "white"

                        Text {
                            anchors.fill: parent
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            wrapMode: Text.WordWrap
                            fontSizeMode: Text.Fit

                            text: notificationRoot.notification.summary
                        }
                    }
                }

                Rectangle {
                    Layout.fillWidth: true

                    implicitHeight: 55
                    radius: 20

                    Rectangle {
                        anchors {
                            left: parent.left
                            top: parent.top
                            bottom: parent.bottom
                        }

                        implicitWidth: parent.width
                        radius: parent.radius
                        color: "white"

                        Text {

                            anchors.fill: parent
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                            wrapMode: Text.WordWrap
                            fontSizeMode: Text.Fit
                            minimumPixelSize: 10
                            elide: Text.ElideRight

                            text: notificationRoot.notification.body
                        }
                    }
                }
            }
        }
    }
}