status-desktop/ui/imports/shared/views/chat/InvitationBubbleView.qml

import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14

import utils 1.0

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

import shared.panels 1.0
import shared.popups 1.0

Control {
    id: root

    implicitWidth: d.invitedCommunity || loading ? 270 /*by design*/ : 0
    padding: 1

    property var store
    property string communityId
    property bool loading: false
    property var communityData

    QtObject {
        id: d

        property var invitedCommunity
    
        readonly property string communityName:         !!d.invitedCommunity ? d.invitedCommunity.name : (communityData ? communityData.displayName : "")
        readonly property string communityDescription:  !!d.invitedCommunity ? d.invitedCommunity.description : (communityData ? communityData.description : "")
        readonly property string communityImage:        !!d.invitedCommunity ? d.invitedCommunity.image : ""
        readonly property string communityColor:        !!d.invitedCommunity ? d.invitedCommunity.color : (communityData ? communityData.color : "")
        readonly property int    communityNbMembers:    !!d.invitedCommunity ? d.invitedCommunity.nbMembers : (communityData ? communityData.membersCount : 0)
        readonly property bool   communityVerified:     false //!!d.invitedCommunity ? d.invitedCommunity.verified : false TODO: add this to the community object if we should support verified communities
        readonly property bool   communityJoined:       !!d.invitedCommunity ? d.invitedCommunity.joined : false
        readonly property bool   communitySpectated:    !!d.invitedCommunity ? d.invitedCommunity.spectated : false

        readonly property int margin: 12
        readonly property int radius: Style.current.padding

        function getCommunity() {
            try {
                const communityJson = root.store.getSectionByIdJson(communityId)

                if (!communityJson) {
                    root.store.requestCommunityInfo(communityId)
                    return null
                }

                return JSON.parse(communityJson);
            } catch (e) {
                console.error("Error parsing community", e)
            }

            return null
        }

        function reevaluate() {
            invitedCommunity = getCommunity()
        }
    }

    Component.onCompleted: {
        d.reevaluate()
    }

    Connections {
        target: root.store.communitiesModuleInst
        function onCommunityChanged(communityId) {
            if (communityId === root.communityId) {
                d.reevaluate()
            }
        }
        function onCommunityAdded(communityId) {
            if (communityId === root.communityId) {
                d.reevaluate()
            }
        }
    }

    background: Rectangle {
        radius: d.radius
        color: Style.current.background
        border.color: Style.current.border
        border.width: 1
    }

    contentItem: ColumnLayout {
        spacing: 0

        StatusBaseText {
            id: title

            Layout.fillWidth: true
            Layout.leftMargin: d.margin
            Layout.rightMargin: d.margin
            Layout.topMargin: 8
            Layout.bottomMargin: 8

            text: d.communityVerified ? qsTr("Verified community invitation") : qsTr("Community invitation")
            color: d.communityVerified ? Theme.palette.primaryColor1 : Theme.palette.baseColor1
            font.weight: Font.Medium
            font.pixelSize: 13
        }

        Rectangle {
            Layout.fillWidth: true
            Layout.preferredHeight: 1
            color: Style.current.separator
        }

        RowLayout {
            id: communityDescriptionLayout

            Layout.leftMargin: d.margin
            Layout.rightMargin: d.margin
            Layout.topMargin: 12
            Layout.bottomMargin: 12

            spacing: 12

            StatusSmartIdenticon {
                Layout.alignment: Qt.AlignTop
                Layout.preferredWidth: 40
                Layout.preferredHeight: 40

                name: d.communityName

                asset {
                    width: 40
                    height: 40
                    name: d.communityImage
                    color: d.communityColor
                    isImage: true
                }

                visible: d.communityColor && d.communityName
            }

            ColumnLayout {
                spacing: 2

                StatusBaseText {
                    Layout.fillWidth: true
                    objectName: "communityName"
                    text: d.communityName
                    font.weight: Font.Bold
                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                    font.pixelSize: 17
                    color: Theme.palette.directColor1
                }

                StatusBaseText {
                    Layout.fillWidth: true
                    objectName: "communityDescription"
                    text: d.communityDescription
                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                    color: Theme.palette.directColor1
                }

                StatusBaseText {
                    Layout.fillWidth: true
                    objectName: "communityMembers"
                    text: qsTr("%n member(s)", "", d.communityNbMembers)
                    font.pixelSize: 13
                    font.weight: Font.Medium
                    color: Theme.palette.baseColor1
                }
            }
        }

        Rectangle {
            Layout.fillWidth: true
            Layout.preferredHeight: 1
            color: Style.current.separator
        }

        Item {
            Layout.fillWidth: true
            Layout.preferredHeight: 44
            clip: true

            StatusFlatButton {
                id: joinBtn
                width: parent.width
                height: (parent.height+d.radius)
                anchors.top: parent.top
                anchors.topMargin: -d.radius
                loading: root.loading
                radius: d.radius - 1 // We do -1, otherwise there's a gap between border and button
                contentItem: Item {
                    StatusBaseText {
                        anchors.centerIn: parent
                        anchors.verticalCenterOffset: d.radius/2
                        visible: !joinBtn.loading
                        font: joinBtn.font
                        color: joinBtn.enabled ? joinBtn.textColor : joinBtn.disabledTextColor
                        text: qsTr("Go to Community")
                    }
                }

                onClicked: {
                    if (d.communityJoined || d.communitySpectated) {
                        root.store.setActiveCommunity(communityId)
                    } else {
                        root.store.spectateCommunity(communityId, userProfile.name)
                    }
                }
            }
        }
    }
}