import Quickshell
import Quickshell.Wayland
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls

PanelWindow {
    id: panel

    anchors.top:   true
    anchors.right: true

    margins.top:   Theme.padding
    margins.right: Theme.padding

    exclusiveZone:       0
    WlrLayershell.layer: WlrLayer.Overlay
    visible:             NotificationsState.panelOpen && !root.zenMode

    width:  360
    height: NotificationsState.notifications.count === 0
            ? 120
            : Math.min(41 + list.contentHeight + 8, 480)

    color: "transparent"

    Rectangle {
        anchors.fill:  parent
        color:         Theme.bg
        radius:        Theme.radius
        border.color:  Theme.bg2
        border.width:  1

        Item {
            id:     header
            height: 40
            anchors.top:   parent.top
            anchors.left:  parent.left
            anchors.right: parent.right

            Text {
                anchors.left:           parent.left
                anchors.leftMargin:     Theme.padding
                anchors.verticalCenter: parent.verticalCenter
                text:           "Notifications"
                color:          Theme.text
                font.pixelSize: Theme.fontSize
                font.family:    Theme.font
                font.bold:      true
            }

            Rectangle {
                visible:                NotificationsState.notifications.count > 0
                anchors.right:          parent.right
                anchors.rightMargin:    Theme.padding
                anchors.verticalCenter: parent.verticalCenter
                height: 22
                width:  clearLabel.implicitWidth + 12
                radius: Theme.radius
                color:  clearBtn.containsMouse ? Theme.bg2 : "transparent"

                Behavior on color { ColorAnimation { duration: 100 } }

                Text {
                    id:               clearLabel
                    anchors.centerIn: parent
                    text:             "Clear all"
                    color:            clearBtn.containsMouse ? Theme.fg2 : Theme.subtle
                    font.pixelSize:   Theme.fontSizeSmall
                    font.family:      Theme.font
                }

                MouseArea {
                    id:           clearBtn
                    anchors.fill: parent
                    hoverEnabled: true
                    cursorShape:  Qt.PointingHandCursor
                    onClicked:    NotificationsState.dismissAll()
                }
            }
        }

        Rectangle {
            id:     sep
            height: 1
            color:  Theme.bg2
            anchors.top:   header.bottom
            anchors.left:  parent.left
            anchors.right: parent.right
        }

        Item {
            visible:       NotificationsState.notifications.count === 0
            anchors.top:   sep.bottom
            anchors.left:  parent.left
            anchors.right: parent.right
            height:        79

            Text {
                anchors.centerIn: parent
                text:             "No notifications"
                color:            Theme.subtle
                font.pixelSize:   Theme.fontSize
                font.family:      Theme.font
            }
        }

        ListView {
            id:      list
            visible: NotificationsState.notifications.count > 0

            anchors.top:          sep.bottom
            anchors.left:         parent.left
            anchors.right:        parent.right
            anchors.bottom:       parent.bottom
            anchors.topMargin:    4
            anchors.bottomMargin: 4

            clip:    true
            spacing: 0
            model:   NotificationsState.notifications

            section.property: "day"
            section.delegate: Item {
                width:  list.width
                height: 28

                Text {
                    anchors.left:           parent.left
                    anchors.leftMargin:     12
                    anchors.verticalCenter: parent.verticalCenter
                    text:           section
                    color:          Theme.accent
                    font.pixelSize: Theme.fontSizeSmall
                    font.family:    Theme.font
                    font.bold:      true
                }
            }

            delegate: NotificationItem {
                required property var model
                required property int index

                width:     list.width
                nid:       model.nid
                appName:   model.appName
                summary:   model.summary
                body:      model.body
                appIcon:   model.appIcon
                urgency:   model.urgency
                timestamp: model.timestamp

                onDismissed: NotificationsState.dismiss(index)
            }

            ScrollBar.vertical: ScrollBar {
                policy: ScrollBar.AsNeeded
            }
        }
    }
}