status-desktop/ui/app/mainui/activitycenter/views/ActivityNotificationBase.qml

import QtQuick 2.14

import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
import StatusQ.Controls 0.1

import shared 1.0
import utils 1.0

import AppLayouts.Chat.stores 1.0 as ChatStores

import mainui.activitycenter.stores 1.0

Item {
    id: root

    /* required */ property int filteredIndex
    /* required */ property var notification
    /* required */ property ChatStores.RootStore store
    /* required */ property ActivityCenterStore activityCenterStore

    property alias bodyComponent: bodyLoader.sourceComponent
    property alias badgeComponent: badgeLoader.sourceComponent
    property alias ctaComponent: ctaLoader.sourceComponent

    signal closeActivityCenter()

    implicitHeight: Math.max(60, bodyLoader.height + bodyLoader.anchors.topMargin * 2 +
                                 (dateGroupLabel.visible ? dateGroupLabel.height : 0) +
                                 (badgeLoader.item ? badgeLoader.height + Style.current.smallPadding : 0))

    StatusDateGroupLabel {
        id: dateGroupLabel
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.left: parent.left
        messageTimestamp: notification ? notification.timestamp : 0
        previousMessageTimestamp: !notification || filteredIndex === 0 || !notification.previousTimestamp ?
                                        0 : notification.previousTimestamp
        visible: text !== ""
    }

    Rectangle {
        id: backgroundRect
        anchors.fill: parent
        anchors.topMargin: dateGroupLabel.visible ? dateGroupLabel.height : 0
        radius: 6
        color: notification && !notification.read ? Theme.palette.primaryColor3 : "transparent"
        Behavior on color { ColorAnimation { duration: 200 } }
    }

    Loader {
        id: bodyLoader
        anchors.top: dateGroupLabel.visible ? dateGroupLabel.bottom : parent.top
        anchors.topMargin: Style.current.smallPadding
        anchors.right: ctaLoader.left
        anchors.rightMargin: Style.current.smallPadding
        anchors.left: parent.left
        clip: true
    }

    Loader {
        id: badgeLoader
        anchors.bottom: parent.bottom
        anchors.bottomMargin: Style.current.smallPadding
        anchors.left: parent.left
        anchors.leftMargin: 50 // TODO find a way to align with the text of the message
    }

    Loader {
        id: ctaLoader
        anchors.verticalCenter: bodyLoader.verticalCenter
        anchors.right: parent.right
        anchors.rightMargin: Style.current.padding

        sourceComponent: StatusFlatRoundButton {
            icon.width: 20
            icon.height: 20
            icon.name: "checkmark"
            icon.color: notification && notification.read ? icon.disabledColor : Theme.palette.primaryColor1
            tooltip.text: notification && notification.read ? qsTr("Mark as Unread") : qsTr("Mark as Read")
            tooltip.orientation: StatusToolTip.Orientation.Left
            tooltip.x: -tooltip.width - Style.current.padding
            tooltip.y: 4
            onClicked: {
                notification.read ?
                    root.activityCenterStore.markActivityCenterNotificationUnread(root.notification) :
                    root.activityCenterStore.markActivityCenterNotificationRead(root.notification)
            }
        }
    }
}