pragma ComponentBehavior: Bound

import qs.config
import qs.custom
import qs.services
import qs.util
import Quickshell
import Quickshell.Widgets
import Quickshell.Services.Notifications
import QtQuick
import QtQuick.Layouts
import QtQuick.Shapes

CustomRect {
    id: root

    required property Notifs.Notif notif
    readonly property bool hasImage: notif.image.length > 0
    readonly property bool hasAppIcon: notif.appIcon.length > 0
    readonly property int nonAnimHeight: inner.nonAnimHeight + inner.anchors.margins * 2

    property bool inPopup: true
    property bool expanded: false

    color: root.notif.urgency === NotificationUrgency.Critical ? Config.colors.errorBg : Config.colors.container
    radius: 12
    implicitWidth: Config.notifs.width
    implicitHeight: inner.implicitHeight + inner.anchors.margins * 2

    onExpandedChanged: {
        if (root.inPopup && expanded)
            root.notif.timer.stop();
    }

    x: inPopup ? Config.notifs.width : 0
    Component.onCompleted: x = 0

    Behavior on x {
        Anim {
            easing.bezierCurve: Config.anim.curves.emphasizedDecel
        }
    }

    RetainableLock {
        object: root.notif.notification
        locked: true
    }

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        cursorShape: root.expanded && body.hoveredLink ? Qt.PointingHandCursor : pressed ? Qt.ClosedHandCursor : undefined
        acceptedButtons: Qt.AllButtons
        preventStealing: true

        onEntered: {
            if (root.inPopup)
                root.notif.timer.stop();
        }
        onExited: {
            if (root.inPopup && !pressed && !root.expanded)
                root.notif.timer.start();
        }

        drag.target: parent
        drag.axis: Drag.XAxis

        onPressed: event => {
            if (event.button === Qt.MiddleButton)
                root.notif.notification.dismiss();
        }
        onReleased: event => {
            if (root.inPopup && !containsMouse && !root.expanded)
                root.notif.timer.start();

            if (Math.abs(root.x) < Config.notifs.width * Config.notifs.clearThreshold)
                root.x = 0;
            else if (root.inPopup)
                root.notif.popup = null;
            else
                root.notif.notification.dismiss();
        }
        onClicked: event => {
            if (event.button === Qt.LeftButton) {
                const actions = root.notif.actions;
                if (actions?.length === 1)
                    actions[0].invoke();
                else
                    root.expanded = !root.expanded;
            } else if (event.button === Qt.RightButton) {
                root.expanded = !root.expanded;
            }
        }

        Item {
            id: inner

            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.margins: 8

            readonly property real nonAnimHeight: root.expanded ? summary.height + appName.height + body.height + actions.height + 16
                : Config.notifs.imageSize
            implicitHeight: nonAnimHeight

            Behavior on implicitHeight {
                Anim {
                    duration: Config.anim.durations.expressiveDefaultSpatial
                    easing.bezierCurve: Config.anim.curves.expressiveDefaultSpatial
                }
            }

            Loader {
                id: image

                active: root.hasImage
                asynchronous: true

                anchors.left: parent.left
                anchors.top: parent.top
                width: Config.notifs.imageSize
                height: Config.notifs.imageSize
                visible: root.hasImage || root.hasAppIcon

                sourceComponent: ClippingRectangle {
                    radius: 1000
                    implicitWidth: Config.notifs.imageSize
                    implicitHeight: Config.notifs.imageSize

                    Image {
                        anchors.fill: parent
                        source: Qt.resolvedUrl(root.notif.image)
                        fillMode: Image.PreserveAspectCrop
                        cache: false
                        asynchronous: true
                    }
                }
            }

            Loader {
                id: appIcon

                active: root.hasAppIcon || !root.hasImage
                asynchronous: true

                anchors.horizontalCenter: root.hasImage ? undefined : image.horizontalCenter
                anchors.verticalCenter: root.hasImage ? undefined : image.verticalCenter
                anchors.right: root.hasImage ? image.right : undefined
                anchors.bottom: root.hasImage ? image.bottom : undefined

                sourceComponent: CustomRect {
                    radius: 1000
                    color: root.notif.urgency === NotificationUrgency.Critical ? Config.colors.error
                        : root.notif.urgency === NotificationUrgency.Low ? Config.colors.inactive
                        : Config.colors.notification
                    implicitWidth: root.hasImage ? Config.notifs.badgeSize : Config.notifs.imageSize
                    implicitHeight: root.hasImage ? Config.notifs.badgeSize : Config.notifs.imageSize

                    Loader {
                        id: icon

                        active: root.hasAppIcon
                        asynchronous: true

                        anchors.centerIn: parent

                        width: Math.round(parent.width * 0.6)
                        height: Math.round(parent.width * 0.6)

                        sourceComponent: IconImage {
                            anchors.fill: parent
                            source: Quickshell.iconPath(root.notif.appIcon)
                            asynchronous: true
                        }
                    }

                    Loader {
                        active: !root.hasAppIcon
                        asynchronous: true
                        anchors.centerIn: parent

                        sourceComponent: MaterialIcon {
                            text: Icons.getNotifIcon(root.notif.summary, root.notif.urgency)

                            color: root.notif.urgency === NotificationUrgency.Low ? Config.colors.primary
                                : Config.colors.primaryDark
                            font.pointSize: Config.font.size.larger
                        }
                    }
                }
            }

            CustomText {
                id: appName

                anchors.top: parent.top
                anchors.left: image.right
                anchors.leftMargin: 10

                animate: true
                text: appNameMetrics.elidedText
                maximumLineCount: 1
                color: root.notif.urgency === NotificationUrgency.Critical ? Config.colors.primary : Config.colors.tertiary
                font.pointSize: Config.font.size.small

                opacity: root.expanded ? 1 : 0
                visible: opacity > 0

                Behavior on opacity {
                    Anim {}
                }
            }

            TextMetrics {
                id: appNameMetrics

                text: root.notif.appName
                font.family: appName.font.family
                font.pointSize: appName.font.pointSize
                elide: Text.ElideRight
                elideWidth: closeBtn.x - timeDetail.width - time.width - timeSep.width - summaryPreview.x - 21
            }

            CustomText {
                id: summaryPreview

                anchors.top: parent.top
                anchors.left: image.right
                anchors.leftMargin: 10
                anchors.topMargin: 2

                animate: true
                text: summaryPreviewMetrics.elidedText
                color: root.notif.urgency === NotificationUrgency.Low ? Config.colors.primary : Config.colors.secondary

                opacity: root.expanded ? 0 : 1
                visible: opacity > 0

                states: State {
                    name: "expanded"
                    when: root.expanded

                    AnchorChanges {
                        target: summaryPreview
                        anchors.top: appName.bottom
                    }
                }

                transitions: Transition {
                    AnchorAnimation {
                        duration: Config.anim.durations.normal
                        easing.type: Easing.BezierSpline
                        easing.bezierCurve: Config.anim.curves.standard
                    }
                }

                Behavior on opacity {
                    Anim {}
                }
            }

            TextMetrics {
                id: summaryPreviewMetrics

                text: root.notif.summary
                font.family: summaryPreview.font.family
                font.pointSize: summaryPreview.font.pointSize
                elide: Text.ElideRight
                elideWidth: closeBtn.x - time.width - timeSep.width - summaryPreview.x - 21
            }

            CustomText {
                id: summary

                anchors.top: parent.top
                anchors.left: image.right
                anchors.right: parent.right
                anchors.leftMargin: 10
                anchors.topMargin: 5
                anchors.rightMargin: 10

                animate: true
                text: root.notif.summary
                color: root.notif.urgency === NotificationUrgency.Low ? Config.colors.primary : Config.colors.secondary
                wrapMode: Text.WrapAtWordBoundaryOrAnywhere

                states: State {
                    name: "expanded"
                    when: root.expanded

                    AnchorChanges {
                        target: summary
                        anchors.top: appName.bottom
                    }
                }

                transitions: Transition {
                    AnchorAnimation {
                        duration: Config.anim.durations.normal
                        easing.type: Easing.BezierSpline
                        easing.bezierCurve: Config.anim.curves.standard
                    }
                }

                opacity: root.expanded ? 1 : 0
                visible: opacity > 0

                Behavior on opacity {
                    Anim {}
                }
            }

            CustomText {
                id: timeSep

                anchors.top: parent.top
                anchors.left: summaryPreview.right
                anchors.leftMargin: 7
                anchors.topMargin: root.expanded ? 0 : 3

                text: "•"
                color: root.notif.urgency === NotificationUrgency.Critical ? Config.colors.primary : Config.colors.tertiary
                font.pointSize: Config.font.size.small

                states: State {
                    name: "expanded"
                    when: root.expanded

                    AnchorChanges {
                        target: timeSep
                        anchors.left: appName.right
                    }
                }

                transitions: Transition {
                    AnchorAnimation {
                        duration: Config.anim.durations.normal
                        easing.type: Easing.BezierSpline
                        easing.bezierCurve: Config.anim.curves.standard
                    }
                }
            }

            CustomText {
                id: time

                anchors.top: parent.top
                anchors.left: timeSep.right
                anchors.leftMargin: 7
                anchors.topMargin: root.expanded ? 0 : 2

                animate: true
                horizontalAlignment: Text.AlignLeft
                text: root.notif.timeSince
                color: root.notif.urgency === NotificationUrgency.Critical ? Config.colors.primary : Config.colors.tertiary
                font.pointSize: Config.font.size.small
            }

            CustomText {
                id: timeDetail

                anchors.verticalCenter: time.verticalCenter
                anchors.left: time.right
                anchors.leftMargin: 5

                horizontalAlignment: Text.AlignLeft
                text: `(${root.notif.timeStr})`
                color: root.notif.urgency === NotificationUrgency.Critical ? Config.colors.primary : Config.colors.tertiary
                font.pointSize: Config.font.size.small

                opacity: root.expanded ? 1 : 0

                Behavior on opacity {
                    Anim {}
                }
            }

            StateLayer {
                id: closeBtn

                anchors.right: expandBtn.left
                anchors.top: parent.top

                implicitWidth: 20
                implicitHeight: 20

                function onClicked() {
                    root.notif.notification.dismiss();
                }

                MaterialIcon {
                    id: closeIcon

                    anchors.centerIn: parent

                    animate: true
                    text: "close"
                    font.pointSize: Config.font.size.normal
                }
            }

            StateLayer {
                id: expandBtn

                anchors.right: parent.right
                anchors.top: parent.top

                implicitWidth: 20
                implicitHeight: 20

                color: root.notif.urgency === NotificationUrgency.Critical ? Config.colors.secondary : Config.colors.primary
                radius: 1000

                function onClicked() {
                    root.expanded = !root.expanded
                }

                MaterialIcon {
                    id: expandIcon

                    anchors.centerIn: parent
                    anchors.verticalCenterOffset: text === "expand_more" ? 1 : 0

                    animate: true
                    text: root.expanded ? "expand_less" : "expand_more"
                    font.pointSize: Config.font.size.normal
                }
            }

            CustomText {
                id: bodyPreview

                anchors.left: summaryPreview.left
                anchors.right: parent.right
                anchors.top: summaryPreview.bottom
                anchors.topMargin: 3
                anchors.rightMargin: 7

                animate: true
                textFormat: Text.MarkdownText
                text: bodyPreviewMetrics.elidedText
                color: root.notif.urgency === NotificationUrgency.Low ? Config.colors.tertiary : Config.colors.primary
                font.pointSize: Config.font.size.small

                opacity: root.expanded ? 0 : 1
                visible: opacity > 0

                Behavior on opacity {
                    Anim {}
                }
            }

            TextMetrics {
                id: bodyPreviewMetrics

                text: root.notif.bodyOneLine
                font.family: bodyPreview.font.family
                font.pointSize: bodyPreview.font.pointSize
                elide: Text.ElideRight
                elideWidth: bodyPreview.width
            }

            CustomText {
                id: body

                anchors.left: summary.left
                anchors.right: parent.right
                anchors.top: summary.bottom
                anchors.rightMargin: 7
                anchors.topMargin: 3

                animate: true
                textFormat: Text.MarkdownText
                text: root.notif.body
                color: root.notif.urgency === NotificationUrgency.Low ? Config.colors.tertiary : Config.colors.primary
                font.pointSize: Config.font.size.small
                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                height: text ? implicitHeight : 0

                onLinkActivated: link => {
                    if (!root.expanded)
                        return;

                    Quickshell.execDetached(["xdg-open", link]);
                    root.notif.notification.dismiss(); // TODO: change back to popup when notif dock impled
                }

                opacity: root.expanded ? 1 : 0
                visible: opacity > 0

                Behavior on opacity {
                    Anim {}
                }
            }

            RowLayout {
                id: actions

                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: body.bottom
                anchors.topMargin: 10

                spacing: 10

                opacity: root.expanded ? 1 : 0

                Behavior on opacity {
                    Anim {}
                }

                Action {
                    modelData: QtObject {
                        readonly property string text: qsTr("Close")
                        function invoke(): void {
                            root.notif.notification.dismiss();
                        }
                    }
                }

                Repeater {
                    model: root.notif.actions

                    delegate: Component {
                        Action {}
                    }
                }
            }
        }
    }

    CustomRect {
        id: progressBar

        visible: root.inPopup
        anchors.bottom: parent.bottom
        height: 2
        color: root.notif.urgency === NotificationUrgency.Critical ? Config.colors.error : Config.colors.inactive
        opacity: root.notif.timer.running ? 1 : 0

        NumberAnimation on implicitWidth {
            from: root.width
            to: 0
            duration: Config.notifs.defaultExpireTimeout
            running: root.notif.timer.running
        }

        Behavior on opacity {
            Anim { duration: Config.anim.durations.small }
        }
    }

    component Action: CustomRect {
        id: action

        required property var modelData

        radius: 1000
        color: root.notif.urgency === NotificationUrgency.Critical ? Config.colors.error : Config.colors.inactive

        implicitWidth: actionText.width + 20
        implicitHeight: actionText.height + 10
        Layout.preferredWidth: implicitWidth
        Layout.preferredHeight: implicitHeight

        StateLayer {
            anchors.fill: parent
            radius: 1000
            color: root.notif.urgency === NotificationUrgency.Critical ? "#ffffff" : Config.colors.primary

            function onClicked(): void {
                action.modelData.invoke();
            }
        }

        CustomText {
            id: actionText

            anchors.centerIn: parent
            text: actionTextMetrics.elidedText
            color: root.notif.urgency === NotificationUrgency.Critical ? Config.colors.primaryDark
                : root.notif.urgency === NotificationUrgency.Low ? Config.colors.primary : Config.colors.secondary
            font.pointSize: Config.font.size.small
        }

        TextMetrics {
            id: actionTextMetrics

            text: action.modelData.text
            font.family: actionText.font.family
            font.pointSize: actionText.font.pointSize
            elide: Text.ElideRight
            elideWidth: {
                const numActions = root.notif.actions.length + 1;
                return (inner.width - actions.spacing * (numActions - 1)) / numActions - 20;
            }
        }
    }
}