import Quickshell
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import "NotificationBox.qml"

PanelWindow {
    id: root
    anchors {
        top: true
        right: true
        bottom: true
    }
    visible: false
    exclusionMode: ExclusionMode.Normal
    implicitWidth: 500
    color: "transparent"

    function open() {
        root.visible = true;
    }
    function close() {
        exitAnim.start();
    }
    function toggle() {
        if (exitAnim.running) return;
        if (root.visible) close();
        else open();
    }

    required property var tracked

    Rectangle {
        color: "#222"
        anchors.fill: parent
        Text {
            id: title
            anchors {
                left: parent.left
                top: parent.top
                leftMargin: 12
                topMargin: 12
            }
            text: "Notifications"
            font.pixelSize: 20
            font.family: "Comfortaa"
            font.bold: true
            color: "white"
        }
        Button {
            anchors {
                top: parent.top
                right: parent.right
            }
            width: clearAllText.width + 32
            height: clearAllText.height + 30
            Text {
                id: clearAllText
                anchors {
                    right: parent.right
                    top: parent.top
                    topMargin: 14
                    rightMargin: 16
                }
                color: "white"
                font.pixelSize: 16
                font.family: "Comfortaa"
                text: "Clear All"
            }
            onClicked: {while (root.tracked.values.length) {
                root.tracked.values[0].tracked = false;
            }}
            property var hover: HoverHandler { }
            background: Rectangle {
                anchors {
                    fill: parent
                    topMargin: 6
                    leftMargin: 8
                    bottomMargin: 6
                    rightMargin: 8
                }
                radius: 12
                color: parent.hover.hovered ? "#333" : "#222"
                Behavior on color { PropertyAnimation {
                    duration: 150
                }}
            }
        }
        ListView {
            anchors {
                fill: parent
                topMargin: 48
            }
            spacing: 10

            add: Transition { NumberAnimation {
                property: "translateX"
                from: root.width
                to: 0
                duration: 300
                easing.type: Easing.OutBack
                easing.overshoot: 0.7
            }}
            remove: Transition { NumberAnimation {
                property: "translateX"
                from: 0
                to: root.width
                duration: 150
                easing.type: Easing.InQuint
            }}
            displaced: Transition { NumberAnimation {
                property: "y"
                duration: 300
                easing.type: Easing.InOutCubic
            }}

            model: root.tracked
            delegate: Button {
                anchors {
                    left: parent.left
                    right: parent.right
                }
                height: notifBox.height
                background: NotificationBox {
                    id: notifBox
                    notification: modelData
                    anchors {
                        left: parent.left
                        right: parent.right
                        leftMargin: 12
                        rightMargin: 12
                    }
                }
                onClicked: modelData.tracked = false
                property real translateX: 0
                transform: Translate { x: translateX }
            }
        }
        transform: Translate {
            NumberAnimation on x {
                running: root.visible
                from: root.implicitWidth
                to: 0
                duration: 300
                easing.type: Easing.OutQuint
            }
            NumberAnimation on x {
                id: exitAnim
                to: root.implicitWidth
                duration: 300
                easing.type: Easing.InQuint
                onFinished: root.visible = false
            }
        }
    }
}