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

Item {
    id: root

    property var notification
    property var store

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

    height: Math.max(50, bodyLoader.height + (badgeLoader.item ? badgeLoader.height : 0))

    Loader {
        id: bodyLoader
        anchors.top: parent.top
        anchors.right: ctaLoader.left
        anchors.left: parent.left
    }

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

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

        sourceComponent: StatusFlatRoundButton {
            id: markReadBtn
            icon.source: Style.svg("check-activity")
            icon.color: notification.read ? icon.disabledColor : "transparent"
            color: "transparent"
            tooltip.text: !notification.read ? qsTr("Mark as Read") : qsTr("Mark as Unread")
            tooltip.orientation: StatusToolTip.Orientation.Left
            tooltip.x: -tooltip.width - Style.current.padding
            tooltip.y: 4
            onClicked: {
                notification.read ?
                    root.store.activityCenterModuleInst.markActivityCenterNotificationUnread(
                        notification.id, notification.message.communityId,
                        notification.message.chatId, notification.notificationType) :
                    root.store.activityCenterModuleInst.markActivityCenterNotificationRead(
                        notification.id, notification.message.communityId,
                        notification.chatId, notification.notificationType)
            }
        }
    }
}