import QtQuick 2.13
import QtGraphicalEffects 1.13

import StatusQ.Controls 0.1

import utils 1.0

Rectangle {
    id: buttonsContainer
    property bool parentIsHovered: false
    property int containerMargin: 2
    property int contentType: 2
    property var messageContextMenu
    property bool showMoreButton: true
    property bool activityCenterMessage
    property string fromAuthor
    property alias editBtnActive: editBtn.active
    signal hoverChanged(bool hovered)
    signal setMessageActive(string messageId, bool active)
    signal clickMessage(bool isProfileClick, bool isSticker, bool isImage, var image, bool emojiOnly)

    visible: !placeholderMessage && !activityCenterMessage &&
             (buttonsContainer.parentIsHovered || isMessageActive)
             && contentType !== Constants.transactionType
    width: buttonRow.width + buttonsContainer.containerMargin * 2
    height: 36
    radius: Style.current.radius
    color: Style.current.modalBackground
    z: 52

    layer.enabled: true
    layer.effect: DropShadow {
        width: buttonsContainer.width
        height: buttonsContainer.height
        x: buttonsContainer.x
        y: buttonsContainer.y + 10
        visible: buttonsContainer.visible
        source: buttonsContainer
        horizontalOffset: 0
        verticalOffset: 2
        radius: 10
        samples: 15
        color: "#22000000"
    }

    MouseArea {
        anchors.fill: buttonsContainer
        acceptedButtons: Qt.NoButton
        hoverEnabled: true
        onEntered: {
            buttonsContainer.hoverChanged(true)
        }
        onExited: {
            buttonsContainer.hoverChanged(false)
        }
    }

    Row {
        id: buttonRow
        spacing: buttonsContainer.containerMargin
        anchors.left: parent.left
        anchors.leftMargin: buttonsContainer.containerMargin
        anchors.verticalCenter: buttonsContainer.verticalCenter
        height: parent.height - 2 * buttonsContainer.containerMargin

        StatusFlatRoundButton {
            id: emojiBtn
            width: 32
            height: 32
            icon.name: "reaction-b"
            type: StatusFlatRoundButton.Type.Tertiary
            //% "Add reaction"
            tooltip.text: qsTrId("add-reaction")
            onClicked: {
                setMessageActive(messageId, true)
                // Set parent, X & Y positions for the messageContextMenu
                buttonsContainer.messageContextMenu.parent = buttonsContainer
                buttonsContainer.messageContextMenu.setXPosition = function() { return (-Math.abs(buttonsContainer.width - buttonsContainer.messageContextMenu.emojiContainer.width))}
                buttonsContainer.messageContextMenu.setYPosition = function() { return (-buttonsContainer.messageContextMenu.height - 4)}
                clickMessage(false, false, false, null, true)
            }
            onHoveredChanged: buttonsContainer.hoverChanged(this.hovered)
        }

        StatusFlatRoundButton {
            id: replyBtn
            width: 32
            height: 32
            icon.name: "reply"
            type: StatusFlatRoundButton.Type.Tertiary
            //% "Reply"
            tooltip.text: qsTrId("message-reply")
            onClicked: {
                SelectedMessage.set(messageId, fromAuthor);
                showReplyArea()
                if (messageContextMenu.closeParentPopup) {
                    messageContextMenu.closeParentPopup()
                }
            }
            onHoveredChanged: buttonsContainer.hoverChanged(this.hovered)
        }

        Loader {
            id: editBtn
            active: isText && !isEdit && isCurrentUser && showEdit
            sourceComponent: StatusFlatRoundButton {
                id: btn
                width: 32
                height: 32
                icon.source: Style.svg("edit-message")
                type: StatusFlatRoundButton.Type.Tertiary
                //% "Edit"
                tooltip.text: qsTrId("edit")
                onClicked: isEdit = true
                onHoveredChanged: buttonsContainer.hoverChanged(btn.hovered)
            }
        }

        StatusFlatRoundButton {
            id: otherBtn
            width: 32
            height: 32
            visible: showMoreButton
            icon.name: "more"
            type: StatusFlatRoundButton.Type.Tertiary
            //% "More"
            tooltip.text: qsTrId("more")
            onClicked: {
                if (typeof isMessageActive !== "undefined") {
                    setMessageActive(messageId, true)
                }
                // Set parent, X & Y positions for the messageContextMenu
                buttonsContainer.messageContextMenu.parent = buttonsContainer
                buttonsContainer.messageContextMenu.setXPosition = function() { return (-Math.abs(buttonsContainer.width - 176))}
                buttonsContainer.messageContextMenu.setYPosition = function() { return (-buttonsContainer.messageContextMenu.height - 4)}
                clickMessage(false, isSticker, false, null, false, true);
            }
            onHoveredChanged: buttonsContainer.hoverChanged(this.hovered)
        }
    }
}