import QtQuick
import Quickshell
import "../../config"
import QtQuick.Layouts
import QtQuick.Controls

Rectangle {
    id: root

    //TODO: urgency, expireTimeoutText, ...

    required property var notification
    required property var screen
    property var urgency: (notification.urgency ?? notification.hints["urgency"]) != null ? (notification.urgency ?? notification.hints["urgency"]) + 1 : 0

    property bool closing: false

    property real duration: (
        notification.expireTimeout > 0 ? notification.expireTimeout*1000 :
        urgency ? urgency * 2000 :
        5000
    )

    signal dismissed(var notification, bool dismiss)

    implicitWidth: screen.width/7
    // implicitHeight: screen.height/7
    implicitHeight: contentRowRectangle.height+(actionRowRectangle.visible?actionRowRectangle.height:0)+(inlineReplyRectangle.visible?inlineReplyRectangle.height:0)+(progressBar.visible?progressBar.height:0)

    color: textBGColor
    border.width: Config.border_width
    border.color: textColor

    property string textColor: urgency != 3 ? Colors.primary : Colors.tertiary
    property string textBGColor: urgency != 3 ? Qt.alpha(Colors.primaryContainer, 0.75) : Qt.alpha(Colors.tertiaryContainer, 0.75)

    function closeNotification(dismiss){
        if (closing) {
            return
        }
        closing = true
        root.dismissed(root.notification, dismiss)
    }

    Connections {
        target: root.notification
        function onClosed(reason){
            // It is known that it can be triggered twice and delete multiple Index but since it is only temporary display and the chance is low it is ignored
            root.closeNotification(false)
        }
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true
        onClicked: {
            root.closeNotification(false)
        }
    }
    Column {
        id: contentColumn
        anchors.fill: parent
        spacing: 0
        // spacing: Config.spacing
        Rectangle{
            id: contentRowRectangle
            height: Math.max(iconRectangle.height, contentRectangle.height)+contentRow.anchors.margins*2
            width: parent.width
            color: "transparent"
            border.width: Config.border_width
            border.color: textColor

            MouseArea {
                id: closingMouseArea
                anchors.top: parent.top
                anchors.right: parent.right
                anchors.margins: Config.spacing

                width: closeIconText.implicitHeight + Config.spacing
                height: closeIconText.implicitHeight + Config.spacing

                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                Rectangle {
                    anchors.fill: parent
                    radius: Config.radius
                    color: parent.containsMouse ? Colors.errorContainer : "transparent"

                    border.width: Config.border_width
                    border.color: parent.containsMouse ? Colors.error : textColor

                    Text {
                        id: closeIconText
                        anchors.centerIn: parent
                        text: "✕"; // or "✕"
                        font.family: Config.font
                        font.pixelSize: Config.screen_height_to_font_small(screen.height)
                        color: parent.parent.containsMouse ? Colors.error_fg : textColor
                    }
                }
                onClicked: function(mouse){
                    mouse.accepted=true
                    root.closeNotification(true)
                }
            }

            Row {
                id: contentRow
                anchors.fill: parent
                anchors.margins: 10
                spacing: Config.spacing*4
                width: parent.width

                // Left side: icon + icon information
                Rectangle{
                    id: iconRectangle
                    width: childrenRect.width
                    height: childrenRect.height
                    color: "transparent"
                    Column {
                        id: iconColumn
                        // height: Math.max(childrenRect.height, contentBodyColumn.height)
                        width: 1.25*iconImage.width
                        spacing: Config.spacing

                        Image {
                            id: iconImage

                            width: screen.width/30
                            height: iconImage.width
                            anchors.horizontalCenter: parent.horizontalCenter

                            source: {
                                if (notification.appIcon) return Quickshell.iconPath(notification.appIcon)
                                if (notification.image) return notification.image
                                const entry = notification.desktopEntry ? DesktopEntries.byId(notification.desktopEntry) : null
                                if (entry && entry.icon) {
                                    const p = Quickshell.iconPath(entry.icon)
                                    if (p && p !== "") return p
                                }
                                return Quickshell.iconPath("notifications")
                            }

                            fillMode: Image.PreserveAspectFit
                            asynchronous: true
                        }

                        Text {
                            id: summaryText
                            // height: implicitHeight + font.pixelSize + Config.spacing

                            text: root.notification.summary
                            visible: root.notification.summary ? true : false
                            width: iconColumn.width
                            font.family: Config.font
                            font.pixelSize: Config.screen_height_to_font_small(screen.height)
                            color: textColor

                            wrapMode: Text.Wrap
                            horizontalAlignment: Text.AlignHCenter
                        }
                    }
                }

                // Right side: notification information
                Rectangle{
                    id: contentRectangle
                    width: childrenRect.width
                    height: childrenRect.height
                    color: "transparent"

                    Column {
                        id: contentBodyColumn
                        width: root.width - iconColumn.width
                        spacing: Config.spacing

                        Text {
                            id: bodyText
                            text: root.notification.body
                            visible: root.notification.body ? true : false

                            width: contentBodyColumn.width
                            font.family: Config.font
                            font.pixelSize: Config.screen_height_to_font_tiny(screen.height)
                            color: textColor
                            wrapMode: Text.Wrap
                        }
                    }
                }
            }
        }

        Rectangle{
            id: actionRowRectangle
            width: root.width
            height: Config.screen_height_to_font_tiny(screen.height)+2*Config.spacing
            border.width: Config.border_width
            border.color: textColor
            color: "transparent"
            visible: notification.actions.length > 0
            Row{
                id: actionsRow
                spacing: Config.spacing
                anchors.fill: parent
                anchors.margins: Config.spacing

                Repeater {
                    id: notificationActionRepeater
                    model: notification.actions

                    delegate: MouseArea{
                        id: actionMouseArea
                        width: actionsRow.width/notification.actions.length
                        height: actionRectangle.height
                        anchors.verticalCenter: parent.verticalCenter

                        hoverEnabled: true
                        cursorShape: Qt.PointingHandCursor

                        Rectangle {
                            id: actionRectangle
                            width: parent.width
                            height: actionRow.height
                            color: actionMouseArea.containsMouse ? Colors.secondaryContainer_fg : Colors.secondaryContainer
                            border.color: actionMouseArea.containsMouse ? Colors.secondary_fg : Colors.secondary
                            border.width: Config.border_width
                            radius: Config.radius_fun(actionRectangle.height)*2

                            Row{
                                id: actionRow
                                width: childrenRect.width
                                height: childrenRect.height
                                anchors.centerIn: parent

                                Image{
                                    id: actionIcon
                                    visible: notification.hasActionIcons
                                }

                                Text {
                                    text: modelData.text
                                    width: Math.min(actionRectangle.width - (actionIcon.visible ? actionIcon.width : 0), implicitWidth)
                                    font.family: Config.font
                                    font.pixelSize: Config.screen_height_to_font_tiny(screen.height)
                                    color: actionMouseArea.containsMouse ? Colors.secondary_fg : Colors.secondary
                                }
                            }
                        }

                        onClicked: function(mouse){
                            mouse.accepted=true
                            modelData.invoke()
                            // resident check is allready in .invoke()
                            root.closeNotification(false)
                        }
                    }
                }
            }
        }

        Rectangle {
            id: inlineReplyRectangle
            width: root.width
            height: Config.screen_height_to_font_small(screen.height)+2*Config.spacing
            border.width: Config.border_width
            border.color: textColor
            color: "transparent"
            visible: notification.hasInlineReply

            function sendReply(message) {
                notification.sendInlineReply(message)
                inlineReplyTextField.focus = false
                // resident check is allready in .invoke()
                root.closeNotification(false)
            }

            Row {
                id: inlineReplyRow
                spacing: Config.spacing
                anchors.fill: parent
                anchors.margins: Config.spacing
                TextField {
                    id: inlineReplyTextField
                    width: parent.width - inlineReplyButtonMouseArea.width
                    height: inlineReplyButtonText.height
                    anchors.verticalCenter: parent.verticalCenter

                    placeholderText: notification.hints["x-kde-reply-placeholder-text"] != null ? notification.hints["x-kde-reply-placeholder-text"] : notification.inlineReplyPlaceholder
                    placeholderTextColor: inlineReplyTextField.activeFocus ? Colors.secondary_fg : Colors.secondary
                    font.family: Config.font
                    leftPadding: Config.spacing

                    background: Rectangle {
                        radius: Config.radius
                        color: inlineReplyTextField.activeFocus ? Colors.tertiary_fg : Colors.primary_fg
                        border.color: inlineReplyTextField.activeFocus ? Colors.tertiary : Colors.primary
                        border.width: Config.border_width
                    }

                    onAccepted: {
                        console.log("[NotificationBodyInlineReply]: Enter pressed:", inlineReplyTextField.text)
                        inlineReplyRectangle.sendReply(inlineReplyTextField.text)
                    }

                }

                MouseArea {
                    id: inlineReplyButtonMouseArea
                    width: inlineReplyButtonText.width + 2*Config.spacing
                    height: inlineReplyButtonText.height
                    anchors.verticalCenter: parent.verticalCenter

                    hoverEnabled: true
                    cursorShape: Qt.PointingHandCursor
                    Rectangle {
                        id: inlineReplyButtonRectangle
                        width: inlineReplyButtonText.width + 2*Config.spacing
                        height: inlineReplyButtonText.height
                        color: inlineReplyButtonMouseArea.containsMouse ? Colors.secondaryContainer_fg : Colors.secondaryContainer
                        border.color: inlineReplyButtonMouseArea.containsMouse ? Colors.secondary_fg : Colors.secondary
                        border.width: Config.border_width
                        radius: inlineReplyButtonRectangle.height*0.5
                        Text {
                            id: inlineReplyButtonText
                            text: "SEND"
                            font.family: Config.font
                            font.pixelSize: Config.screen_height_to_font_small(screen.height)
                            color: inlineReplyButtonMouseArea.containsMouse ? Colors.secondary_fg : Colors.secondary
                            anchors.centerIn: parent
                        }
                    }
                    onClicked: function(mouse){
                        mouse.accepted=true;
                        console.log("[NotificationBodyInlineReply]: Pressed SEND:", inlineReplyTextField.text)
                        inlineReplyRectangle.sendReply(inlineReplyTextField.text)
                    }
                }
            }
        }

        // Timeout progress bar
        Rectangle {
            id: progressBar
            // anchors.bottom: parent.bottom
            // anchors.left: parent.left
            height: Config.screen_height_to_font_tiny(screen.height)
            color: textColor
            visible: root.duration > 0

            property real progress: 1.0
            width: parent.width * progress

            NumberAnimation on progress {
                id: anim
                running: root.duration > 0
                from: 1.0
                to: 0.0
                duration: root.duration 
                paused: mouseArea.containsMouse || closingMouseArea.containsMouse || inlineReplyButtonMouseArea.containsMouse

                onFinished: root.closeNotification(false)
            }
        }
    }

    Component.onCompleted: {
        if(Config.debug == "Notification"){
            console.log("\x1b[31m[NotificationBody]:"+"\x1b[0m")
            console.log("\x1b[31m\t"+"notification.inlineReplyPlaceholder: " + notification.inlineReplyPlaceholder +"\x1b[0m")
            console.log("\x1b[31m\t"+"notification.body: " + notification.body+"\x1b[0m")
            console.log("\x1b[31m\t"+"notification.lastGeneration: " + notification.lastGeneration+"\x1b[0m")
            console.log("\x1b[31m\t"+"notification.appName: " + notification.appName+"\x1b[0m")
            console.log("\x1b[31m\t"+"notification.image: " + notification.image+"\x1b[0m")
            console.log("\x1b[31m\t"+"notification.expireTimeout: " + notification.expireTimeout+"\x1b[0m")
            console.log("\x1b[31m\t"+"notification.resident: " + notification.resident+"\x1b[0m")
            console.log("\x1b[31m\t"+"notification.id: " + notification.id+"\x1b[0m")
            console.log("\x1b[31m\t"+"notification.actions: " + notification.actions+"\x1b[0m")
            if (notification.actions != []) {
                for (const notificationAction of notification.actions) {
                    console.log("\x1b[31m\t"+"notification.actions: "+ notificationAction+"\x1b[0m")
                    console.log("\x1b[31m\t"+"notification.actions.text: "+ notificationAction.text+"\x1b[0m")
                    console.log("\x1b[31m\t"+"notification.actions.identifier: "+ notificationAction.identifier+"\x1b[0m")
                }
            }
            console.log("\x1b[31m\t"+"notification.urgency: " + notification.urgency+"\x1b[0m")
            console.log("\x1b[31m\t"+"notification.appIcon: " + notification.appIcon + " | " + Quickshell.iconPath(notification.appIcon)+"\x1b[0m")
            console.log("\x1b[31m\t"+"notification.desktopEntry: " + notification.desktopEntry+"\x1b[0m")
            console.log("\x1b[31m\t"+"notification.hints: " + notification.hints+"\x1b[0m")
            for (const item of Object.keys(notification.hints)) {
                console.log("\x1b[31m\t"+"notification.hints[\""+ item +"\"]: " + notification.hints[item]+"\x1b[0m")
            }
            console.log("\x1b[31m\t"+"notification.summary: " + notification.summary+"\x1b[0m")
            console.log("\x1b[31m\t"+"notification.transient: " + notification.transient+"\x1b[0m")
            console.log("\x1b[31m\t"+"notification.hasInlineReply: " + notification.hasInlineReply+"\x1b[0m")
            console.log("\x1b[31m\t"+"notification.hasActionIcons: " + notification.hasActionIcons+"\x1b[0m")
            
            console.log("\x1b[31m\t"+"image.source: " + iconImage.source+"\x1b[0m")
            console.log("\x1b[31m\t"+"urgency: " + urgency+"\x1b[0m")
            console.log("\x1b[31m\t"+"duration: " + duration+"\x1b[0m")
        }
    }
}