status-desktop/ui/app/AppLayouts/Chat/CommunityComponents/CommunityProfilePopup.qml

import QtQuick 2.12
import QtQuick.Dialogs 1.3
import QtQuick.Layouts 1.13
import QtGraphicalEffects 1.13
import "../../../../imports"
import "../../../../shared"
import "../../../../shared/status"
import "../ContactsColumn"

ModalPopup {
    property QtObject community: chatsModel.activeCommunity
    property string communityId: community.id
    property string name: community.name
    property string description: community.description
    property int access: community.access
    // TODO get the real image once it's available
    property string source: "../../../img/ens-header-dark@2x.png"
    property int nbMembers: community.nbMembers
    property bool isAdmin: true // TODO: 
    height: isAdmin ? 640 : 509

    id: popup

    header: Item {
        height: childrenRect.height
        width: parent.width

        RoundedImage {
            id: communityImg
            source: popup.source
            width: 40
            height: 40
        }

        StyledTextEdit {
            id: communityName
            text:  popup.name
            anchors.top: parent.top
            anchors.topMargin: 2
            anchors.left: communityImg.right
            anchors.leftMargin: Style.current.smallPadding
            font.bold: true
            font.pixelSize: 17
            readOnly: true
        }

        StyledText {
            text: {
                switch(access) {
                //% "Public community"
                case Constants.communityChatPublicAccess: return qsTrId("public-community");
                //% "Invitation only community"
                case Constants.communityChatInvitationOnlyAccess: return qsTrId("invitation-only-community");
                //% "On request community"
                case Constants.communityChatOnRequestAccess: return qsTrId("on-request-community");
                //% "Unknown community"
                default: return qsTrId("unknown-community");
                }
            }
            anchors.left: communityName.left
            anchors.top: communityName.bottom
            anchors.topMargin: 2
            font.pixelSize: 15
            font.weight: Font.Thin
            color: Style.current.secondaryText
        }
    }

    StyledText {
        id: descriptionText
        text: popup.description
        wrapMode: Text.Wrap
        width: parent.width
        font.pixelSize: 15
        font.weight: Font.Thin
    }


    Separator {
        id: sep1
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: descriptionText.bottom
        anchors.topMargin: Style.current.smallPadding
        anchors.leftMargin: -Style.current.padding
        anchors.rightMargin: -Style.current.padding
    }

    TextWithLabel {
        id: shareCommunity
        anchors.top: sep1.bottom
        anchors.topMargin: Style.current.bigPadding
        //% "Share community"
        label: qsTrId("share-community")
        text: "https://join.status.im/u/TODO"
        textToCopy: text
    }

    Separator {
        id: sep2
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: shareCommunity.bottom
        anchors.topMargin: Style.current.smallPadding
        anchors.leftMargin: -Style.current.padding
        anchors.rightMargin: -Style.current.padding
    }

    Column {
        anchors.top: sep2.bottom
        anchors.topMargin: Style.current.padding
        width: parent.width
        spacing: Style.current.padding
        
        
        Loader {
            active: isAdmin
            width: parent.width
            sourceComponent: Component {
                CommunityPopupButton {
                    id: memberBtn
                    label: qsTr("Members")
                    iconName: "members"
                    txtColor: Style.current.textColor
                    onClicked: openPopup(communityMembersPopup)

                    Component {
                        id: communityMembersPopup
                        CommunityMembersPopup {}
                    }

                    Item {
                        property int nbRequests: chatsModel.activeCommunity.communityMembershipRequests.nbRequests

                        id: memberBlock
                        anchors.top: parent.top
                        anchors.right: parent.right
                        anchors.rightMargin: 0
                        width: childrenRect.width
                        height: memberBtn.height

                        StyledText {
                            id: nbMemberText
                            text: nbMembers.toString()
                            anchors.verticalCenter: parent.verticalCenter
                            padding: 0
                            font.pixelSize: 15
                            color: Style.current.secondaryText
                        }

                        Rectangle {
                            id: badge
                            visible: memberBlock.nbRequests > 0
                            anchors.left: nbMemberText.right
                            anchors.leftMargin: visible ? Style.current.halfPadding : 0
                            anchors.verticalCenter: parent.verticalCenter
                            color: Style.current.blue
                            width: visible ? 22 : 0
                            height: 22
                            radius: width / 2
                            Text {
                                font.pixelSize: 12
                                color: Style.current.white
                                anchors.centerIn: parent
                                text: memberBlock.nbRequests
                            }
                        }

                        SVGImage {
                            id: caret
                            anchors.left: badge.right
                            anchors.leftMargin: Style.current.padding
                            anchors.verticalCenter: parent.verticalCenter
                            source: "../../../img/caret.svg"
                            width: 13
                            height: 7
                            rotation: -90
                            ColorOverlay {
                                anchors.fill: parent
                                source: parent
                                color: Style.current.secondaryText
                            }
                        }
                    }
                }
            }
        }

        Loader {
            active: isAdmin
            width: parent.width
            sourceComponent: CommunityPopupButton {
                //% "Roles"
                label: qsTrId("roles")
                iconName: "roles"
                width: parent.width
                onClicked: console.log("TODO:")
                txtColor: Style.current.textColor
                SVGImage {
                    anchors.top: parent.top
                    anchors.topMargin: Style.current.padding
                    anchors.right: parent.right
                    anchors.rightMargin: 0
                    source: "../../../img/caret.svg"
                    width: 13
                    height: 7
                    rotation: -90
                    ColorOverlay {
                        anchors.fill: parent
                        source: parent
                        color: Style.current.secondaryText
                    }
                }
            }
        }

        CommunityPopupButton {
            id: notificationsBtn
            //% "Notifications"
            label: qsTrId("notifications")
            iconName: "notifications"
            width: parent.width
            txtColor: Style.current.textColor
            onClicked: function(){
                notificationSwitch.checked = !notificationSwitch.checked
            }
            StatusSwitch {
                id: notificationSwitch
                anchors.right: parent.right
                onCheckedChanged: function(value) {
                    // TODO: enable/disable notifications
                    console.log("TODO: toggle")
                }
            }
        }

        Separator {
            width: parent.width
        }

        Loader {
            active: isAdmin
            width: parent.width
            sourceComponent: CommunityPopupButton {
                //% "Edit community"
                label: qsTrId("edit-community")
                iconName: "edit"
                onClicked: openPopup(editCommunityPopup)
                Component {
                    id: editCommunityPopup
                    CreateCommunityPopup {
                        isEdit: true
                    }
                }
            }
        }

        Loader {
            property string exportResult: ""

            active: isAdmin
            width: parent.width
            sourceComponent: !exportResult ? exportBtn : resultComponent

            Component {
                id: exportBtn
                CommunityPopupButton {
                    //% "Export community"
                    label: qsTrId("export-community")
                    iconName: "../fetch"
                    onClicked:  exportResult = chatsModel.exportComumnity()
                }
            }

            Component {
                id: resultComponent
                StyledText {
                    property bool isError: !exportResult.startsWith("0x")

                    text: exportResult
                    color: isError ? Style.current.danger : Style.current.textColor
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.rightMargin: Style.current.smallPadding + copyToClipboardBtn.width
                    wrapMode: TextEdit.WrapAnywhere

                    CopyToClipBoardButton {
                        id: copyToClipboardBtn
                        visible: !isError
                        textToCopy: exportResult
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.left: parent.right
                        anchors.leftMargin: Style.current.smallPadding
                    }
                }
            }
        }

        CommunityPopupButton {
            //% "Leave community"
            label: qsTrId("leave-community")
            iconName: "leave"
        }

        Loader {
            active: isAdmin
            width: parent.width
            sourceComponent: CommunityPopupButton {
                id: deleteBtn
                //% "Delete"
                label: qsTrId("delete")
                iconName: "delete"
                txtColor: Style.current.red
                //btnColor: Style.current.red // TODO: statusroundbutton should support changing color
            }
        }
    }
}