pragma ComponentBehavior: Bound

import Quickshell
import Quickshell.Widgets
import QtQuick
import QtQuick.Layouts
import ZShell.Components
import ZShell.Config
import ZShell.Services
import qs.Modules
import qs.Components
import qs.Components.Notifs
import qs.Helpers
import qs.Daemons
import qs.Services

CustomRect {
	id: root

	required property var lock

	bottomRightRadius: Tokens.rounding.largeIncreased
	color: Colors.tPalette.m3surfaceContainer
	radius: Tokens.rounding.small
	topRightRadius: Tokens.rounding.largeIncreased

	SnapLayout {
		anchors.fill: parent
		anchors.margins: Tokens.padding.large

		orientation: Qt.Vertical
		spacing: Tokens.spacing.small

		CustomText {
			Layout.fillWidth: true
			color: Colors.palette.m3outline
			elide: Text.ElideRight
			font: Tokens.font.mono.builders.small.weight(Font.Medium).build()
			text: NotifServer.notClosed.length > 0 ? qsTr("%1 notification%2").arg(NotifServer.notClosed.length).arg(NotifServer.notClosed.length === 1 ? "" : "s") : qsTr("Notifications")
		}

		Item {
			Layout.fillHeight: true
			Layout.fillWidth: true

			Loader {
				active: opacity > 0
				anchors.centerIn: parent
				opacity: NotifServer.notClosed.length > 0 ? 0 : 1

				Behavior on opacity {
					Anim {
						duration: Tokens.anim.durations.extraLarge
					}
				}
				sourceComponent: CustomText {
					color: Colors.palette.m3outlineVariant
					font: Tokens.font.headline.builders.small.width(90).build()
					text: qsTr("No Notifications")
				}
			}

			CustomListView {
				id: list

				anchors.fill: parent
				clip: true
				orientation: Qt.Vertical
				spacing: Tokens.spacing.small

				add: Transition {
					Anim {
						from: 0
						property: "opacity"
						to: 1
					}

					Anim {
						duration: Tokens.anim.durations.expressiveDefaultSpatial
						easing: Tokens.anim.expressiveDefaultSpatial
						from: 0
						property: "scale"
						to: 1
					}
				}
				delegate: NotifRow {}
				displaced: Transition {
					Anim {
						properties: "opacity,scale"
						to: 1
					}

					Anim {
						duration: Tokens.anim.durations.expressiveDefaultSpatial
						easing: Tokens.anim.expressiveDefaultSpatial
						property: "y"
					}
				}
				model: ScriptModel {
					values: [...NotifServer.groups].filter(g => g.count > 0)
				}
				move: Transition {
					Anim {
						properties: "opacity,scale"
						to: 1
					}

					Anim {
						duration: Tokens.anim.durations.expressiveDefaultSpatial
						easing: Tokens.anim.expressiveDefaultSpatial
						property: "y"
					}
				}
				remove: Transition {
					Anim {
						property: "opacity"
						to: 0
					}

					Anim {
						property: "scale"
						to: 0.6
					}
				}
			}
		}
	}

	component NotifRow: Item {
		id: row

		required property NotificationGroup modelData
		property bool expanded: false

		function dismissAll(): void {
			for (const n of [...modelData.activeNotifs])
				n.dismiss();
		}

		implicitHeight: card.implicitHeight
		implicitWidth: list.width

		NotifSwipeArea {
			id: area

			implicitHeight: card.implicitHeight
			implicitWidth: row.implicitWidth

			expanded: row.expanded
			onDismissed: row.dismissAll()
			onRequestExpand: expand => row.expanded = expand
			onSwiped: row.dismissAll()

			Item {
				anchors.top: parent.top

				implicitHeight: card.implicitHeight
				implicitWidth: row.implicitWidth

				clip: true

				NotifGroupCard {
					id: card

					baseLayer: 1
					container: list
					expanded: row.expanded
					group: row.modelData
					onRequestExpand: expand => row.expanded = expand
					onSwiped: notif => notif.dismiss()
				}
			}
		}
	}
}