// Quiet transient Signal Glass content. It acknowledges one meaningful state
// transition and then leaves; it is not a notification and has no history.

import QtQuick
import qs.config
import qs.services
import qs.widgets

Rectangle {
    id: root

    required property var event
    readonly property color toneColor: {
        if (event?.tone === "danger")
            return Theme.danger;
        if (event?.tone === "warn")
            return Theme.warn;
        if (event?.tone === "ok")
            return Theme.ok;
        return Theme.accent;
    }

    radius: Theme.popoverRadius
    color: Theme.alpha(Theme.bgPopover, 0.86)
    border.width: 1
    border.color: Theme.alpha(Theme.fg, 0.09)

    PrismEdge {
        anchors.top: parent.top
        anchors.topMargin: 1
        anchors.left: parent.left
        anchors.right: parent.right
        inset: parent.radius
    }

    Rectangle {
        id: mark
        anchors.left: parent.left
        anchors.leftMargin: 12
        anchors.verticalCenter: parent.verticalCenter
        width: 38
        height: 38
        radius: 19
        border.width: 0
        color: Theme.alpha(root.toneColor, 0.14)

        Text {
            anchors.centerIn: parent
            visible: root.event?.glyph !== ""
            text: root.event?.glyph ?? ""
            color: root.toneColor
            font.family: Theme.fontMono
            font.pixelSize: 19
        }

        ThemedIcon {
            anchors.centerIn: parent
            visible: root.event?.glyph === ""
            size: 19
            icon: root.event?.icon ?? "dialog-information-symbolic"
            tint: root.toneColor
        }
    }

    Column {
        anchors.left: mark.right
        anchors.leftMargin: 11
        anchors.right: closeButton.left
        anchors.rightMargin: 10
        anchors.verticalCenter: parent.verticalCenter
        spacing: 2

        Text {
            width: parent.width
            text: root.event?.title ?? ""
            color: Theme.fg
            elide: Text.ElideRight
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSize
            font.weight: Font.DemiBold
        }

        Text {
            width: parent.width
            visible: text !== ""
            text: root.event?.detail ?? ""
            color: Theme.fgDim
            elide: Text.ElideRight
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSizeSmall
        }
    }

    Rectangle {
        id: closeButton
        anchors.right: parent.right
        anchors.rightMargin: 10
        anchors.verticalCenter: parent.verticalCenter
        width: 28
        height: 28
        radius: 14
        border.width: 0
        color: closeMouse.containsMouse ? Theme.alpha(Theme.fg, Theme.hoverAlpha) : "transparent"

        ThemedIcon {
            anchors.centerIn: parent
            size: 14
            icon: "window-close-symbolic"
            tint: Theme.fgDim
        }

        MouseArea {
            id: closeMouse
            anchors.fill: parent
            hoverEnabled: true
            cursorShape: Qt.PointingHandCursor
            onClicked: StatusEvents.dismiss()
        }
    }

    MouseArea {
        anchors.left: parent.left
        anchors.right: closeButton.left
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        cursorShape: root.event?.actionId ? Qt.PointingHandCursor : Qt.ArrowCursor
        onClicked: {
            if (root.event?.actionId)
                StatusEvents.invoke();
            else
                StatusEvents.dismiss();
        }
    }
}