pragma ComponentBehavior: Bound

import Quickshell
import Quickshell.Widgets
import QtQuick
import QtQuick.Layouts
import qs.Modules
import qs.Components
import qs.Helpers
import ZShell.Config
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

	ColumnLayout {
		anchors.fill: parent
		anchors.margins: Tokens.padding.large
		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.list.length > 0 ? qsTr("%1 notification%2").arg(NotifServer.list.length).arg(NotifServer.list.length === 1 ? "" : "s") : qsTr("Notifications")
		}

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

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

				Behavior on opacity {
					Anim {
						duration: Tokens.anim.durations.extraLarge
					}
				}
				sourceComponent: ColumnLayout {
					spacing: Tokens.spacing.largeIncreased

					CustomText {
						Layout.alignment: Qt.AlignHCenter
						color: Colors.palette.m3outlineVariant
						font: Tokens.font.headline.builders.small.width(90).build()
						text: qsTr("No Notifications")
					}
				}
			}

			CustomListView {
				anchors.fill: parent
				clip: true
				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: NotifGroup {}
				displaced: Transition {
					Anim {
						properties: "opacity,scale"
						to: 1
					}

					Anim {
						duration: Tokens.anim.durations.expressiveDefaultSpatial
						easing: Tokens.anim.expressiveDefaultSpatial
						property: "y"
					}
				}
				model: ScriptModel {
					values: {
						const list = NotifServer.notClosed.map(n => [n.appName, null]);
						return [...new Map(list).keys()];
					}
				}
				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
					}
				}
			}
		}
	}
}