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

    /* required */ property int filteredIndex
    /* required */ property var notification
    /* required */ property var store
    /* required */ property var 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)
            }
        }
    }
}