status-desktop/ui/app/AppLayouts/Chat/views/CommunityColumnView.qml

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Dialogs 1.2
import QtGraphicalEffects 1.13
import QtQuick.Layouts 1.13

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

import utils 1.0
import shared 1.0
import shared.popups 1.0
import shared.status 1.0
import "../popups/community"
import "../panels/communities"

// FIXME: Rework me to use ColumnLayout instead of anchors!!
Item {
    id: root
    objectName: "communityColumnView"
    width: 304
    height: parent.height

    // Important:
    // We're here in case of CommunitySection
    // This module is set from `ChatLayout` (each `ChatLayout` has its own communitySectionModule)
    property var communitySectionModule
    property var emojiPopup

    property var store
    property bool hasAddedContacts: false
    property var communityData: store.mainModuleInst ? store.mainModuleInst.activeSection || {} : {}
    property Component membershipRequestPopup

    signal infoButtonClicked
    signal manageButtonClicked

    MouseArea {
        enabled: communityData.amISectionAdmin
        anchors.fill: parent
        z: 0
        acceptedButtons: Qt.RightButton
        onClicked: {
            adminPopupMenu.showInviteButton = true
            adminPopupMenu.x = mouse.x + 4
            adminPopupMenu.y = mouse.y + 4
            adminPopupMenu.open()
        }
    }

    StatusChatInfoButton {
        id: communityHeader
        objectName: "communityHeaderButton"
        readonly property int nbMembers: communityData.members.count
        title: communityData.name
        subTitle: qsTr("%n member(s)", "", nbMembers)
        asset.name: communityData.image
        asset.color: communityData.color
        asset.isImage: true
        onClicked: if (communityData.amISectionAdmin) { root.infoButtonClicked() }
        anchors.top: parent.top
        anchors.topMargin: Style.current.smallPadding
        anchors.left: parent.left
        anchors.leftMargin: Style.current.halfPadding
        anchors.right: (implicitWidth > parent.width - 50) ? adHocChatButton.left : undefined
        anchors.rightMargin: Style.current.halfPadding
        type: StatusChatInfoButton.Type.OneToOneChat
        hoverEnabled: communityData.amISectionAdmin
    }

    StatusIconTabButton {
        id: adHocChatButton
        icon.name: "edit"
        objectName: "startChatButton"
        icon.color: Theme.palette.directColor1
        anchors.verticalCenter: communityHeader.verticalCenter
        anchors.right: parent.right
        anchors.rightMargin: Style.current.padding
        checked: root.store.openCreateChat
        highlighted: root.store.openCreateChat
        onClicked: {
            if (root.store.openCreateChat) {
                Global.closeCreateChatView()
            } else {
                Global.openCreateChatView()
            }
        }

        StatusToolTip {
            text: qsTr("Start chat")
            visible: parent.hovered
            orientation: StatusToolTip.Orientation.Bottom
            y: parent.height + 12
        }
    }

    StatusButton {
        id: joinCommunityButton

        property bool invitationPending: root.store.isCommunityRequestPending(communityData.id)

        anchors.top: communityHeader.bottom
        anchors.topMargin: 8
        anchors.bottomMargin: Style.current.halfPadding
        anchors.horizontalCenter: parent.horizontalCenter
        enabled: !root.communityData.amIBanned

        visible: !communityData.joined || root.communityData.amIBanned

        text: {
            if (root.communityData.amIBanned) return qsTr("You were banned from community")
            if (invitationPending) return qsTr("Membership request pending...")

            return root.communityData.access === Constants.communityChatOnRequestAccess ?
                    qsTr("Request to join") : qsTr("Join Community")
        }

        onClicked: {
            communityIntroDialog.open()
        }

        Connections {
            target: root.store.communitiesModuleInst
            function onCommunityAccessRequested(communityId: string) {
                if (communityId === communityData.id) {
                    joinCommunityButton.invitationPending = root.store.isCommunityRequestPending(communityData.id)
                }
            }
        }

        CommunityIntroDialog {
            id: communityIntroDialog

            isInvitationPending: joinCommunityButton.invitationPending
            name: communityData.name
            introMessage: communityData.introMessage
            imageSrc: communityData.image
            accessType: communityData.access

            onJoined: root.store.requestToJoinCommunity(communityData.id, root.store.userProfileInst.name)
            onCancelMembershipRequest: {
                root.store.cancelPendingRequest(communityData.id)
                joinCommunityButton.invitationPending = root.store.isCommunityRequestPending(communityData.id)
            }
        }
    }

    Loader {
        id: membershipRequests

        readonly property int nbRequests: root.communityData.pendingRequestsToJoin.count || 0

        anchors.top: joinCommunityButton.visible ? joinCommunityButton.bottom : communityHeader.bottom
        anchors.topMargin: active ? 8 : 0
        anchors.horizontalCenter: parent.horizontalCenter

        active: communityData.amISectionAdmin && nbRequests > 0
        height: nbRequests > 0 ? 64 : 0
        sourceComponent: Component {
            StatusContactRequestsIndicatorListItem {
                title: qsTr("Membership requests")
                requestsCount: membershipRequests.nbRequests
                onClicked: Global.openPopup(root.membershipRequestPopup, {
                    communitySectionModule: root.communitySectionModule
                })
            }
        }
    }

    StatusMenu {
        id: adminPopupMenu
        enabled: communityData.amISectionAdmin

        property bool showInviteButton: false

        onClosed: adminPopupMenu.showInviteButton = false

        StatusAction {
            objectName: "createCommunityChannelBtn"
            text: qsTr("Create channel")
            icon.name: "channel"
            onTriggered: Global.openPopup(createChannelPopup)
        }

        StatusAction {
            objectName: "createCommunityCategoryBtn"
            text: qsTr("Create category")
            icon.name: "channel-category"
            onTriggered: Global.openPopup(createCategoryPopup)
        }

        StatusMenuSeparator {
            visible: invitePeopleBtn.enabled
        }

        StatusAction {
            id: invitePeopleBtn
            text: qsTr("Invite people")
            icon.name: "share-ios"
            enabled: communityData.canManageUsers && adminPopupMenu.showInviteButton
            onTriggered: {
                Global.openInviteFriendsToCommunityPopup(root.communityData,
                                                         root.communitySectionModule,
                                                         null)
            }
        }
    }

    StatusScrollView {
        id: scrollView
        anchors.top: membershipRequests.bottom
        anchors.topMargin: Style.current.padding
        anchors.bottom: createChatOrCommunity.top
        anchors.horizontalCenter: parent.horizontalCenter

        topPadding: Style.current.padding

        width: parent.width

        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
        contentWidth: communityChatListAndCategories.implicitWidth
        contentHeight: communityChatListAndCategories.height
                       + bannerColumn.height
                       + Style.current.bigPadding

        StatusChatListAndCategories {
            id: communityChatListAndCategories
            anchors.horizontalCenter: parent.horizontalCenter
            draggableItems: communityData.amISectionAdmin
            draggableCategories: communityData.amISectionAdmin

            model: root.communitySectionModule.model
            highlightItem: !root.store.openCreateChat

            onChatItemSelected: {
                Global.closeCreateChatView()
                root.communitySectionModule.setActiveItem(id)
            }

            showCategoryActionButtons: communityData.amISectionAdmin
            showPopupMenu: communityData.amISectionAdmin && communityData.canManageUsers

            onChatItemUnmuted: root.communitySectionModule.unmuteChat(id)
            onChatItemReordered: function(categoryId, chatId, from, to){
                root.store.reorderCommunityChat(categoryId, chatId, to)
            }
            onChatListCategoryReordered: root.store.reorderCommunityCategories(categoryId, to)

            onCategoryAddButtonClicked: Global.openPopup(createChannelPopup, {
                categoryId: id
            })

            popupMenu: StatusMenu {
                StatusAction {
                    text: qsTr("Create channel")
                    icon.name: "channel"
                    enabled: communityData.amISectionAdmin
                    onTriggered: Global.openPopup(createChannelPopup)
                }

                StatusAction {
                    text: qsTr("Create category")
                    icon.name: "channel-category"
                    enabled: communityData.amISectionAdmin
                    onTriggered: Global.openPopup(createCategoryPopup)
                }

                StatusMenuSeparator {}

                StatusAction {
                    text: qsTr("Invite people")
                    icon.name: "share-ios"
                    enabled: communityData.canManageUsers
                    onTriggered: {
                        Global.openInviteFriendsToCommunityPopup(root.communityData,
                                                                 root.communitySectionModule,
                                                                 null)
                    }
                }
            }

            categoryPopupMenu: StatusMenu {

                property var itemWithCategory
                property string categoryId

                openHandler: function () {
                    let jsonObj = root.communitySectionModule.getItemPartOfCategoryAsJsonById(categoryId)
                    try {
                        let obj = JSON.parse(jsonObj)
                        if (obj.error) {
                            console.error("error parsing chat item json object, id: ", categoryId, " error: ", obj.error)
                            close()
                            return
                        }
                        itemWithCategory = obj
                    } catch (e) {
                        console.error("error parsing chat item json object, id: ", categoryId, " error: ", e)
                        close()
                        return
                    }
                }

                StatusAction {
                    // TODO pass categoryMuted to Item
                    text: itemWithCategory.muted ? qsTr("Unmute category") : qsTr("Mute category")
                    icon.name: "notification"
                    onTriggered: {
                        if (itemWithCategory.muted) {
                            root.communitySectionModule.unmuteCategory(itemWithCategory.categoryId)
                        } else {
                            root.communitySectionModule.muteCategory(itemWithCategory.categoryId)
                        }
                    }
                }

                StatusAction {
                    objectName: "editCategoryMenuItem"
                    enabled: communityData.amISectionAdmin
                    text: qsTr("Edit Category")
                    icon.name: "edit"
                    onTriggered: {
                       Global.openPopup(createCategoryPopup, {
                           isEdit: true,
                           channels: [],
                           categoryId: itemWithCategory.categoryId,
                           categoryName: itemWithCategory.categoryName
                       })
                    }
                }

                StatusMenuSeparator {
                    visible: communityData.amISectionAdmin
                }

                StatusAction {
                    objectName: "deleteCategoryMenuItem"
                    enabled: communityData.amISectionAdmin
                    text: qsTr("Delete Category")
                    icon.name: "delete"
                    type: StatusAction.Type.Danger
                    onTriggered: {
                        Global.openPopup(deleteCategoryConfirmationDialogComponent, {
                            title: qsTr("Delete %1 category").arg(itemWithCategory.categoryName),
                            confirmationText: qsTr("Are you sure you want to delete %1 category? Channels inside the category won't be deleted.")
                                .arg(itemWithCategory.categoryName),
                            categoryId: itemWithCategory.categoryId
                        })
                    }
                }
            }

            chatListPopupMenu: ChatContextMenuView {
                id: chatContextMenuView
                emojiPopup: root.emojiPopup

                openHandler: function (id) {
                    try {
                        let jsonObj = root.communitySectionModule.getItemAsJson(id)
                        let obj = JSON.parse(jsonObj)
                        if (obj.error) {
                            console.error("error parsing chat item json object, id: ", id, " error: ", obj.error)
                            close()
                            return
                        }

                        currentFleet = root.communitySectionModule.getCurrentFleet()
                        isCommunityChat = root.communitySectionModule.isCommunity()
                        amIChatAdmin = obj.amIChatAdmin
                        chatId = obj.itemId
                        chatName = obj.name
                        chatDescription = obj.description
                        chatIcon = obj.icon
                        chatEmoji = obj.emoji
                        chatColor = obj.color
                        chatType = obj.type
                        chatMuted = obj.muted
                        channelPosition = obj.position
                        chatCategoryId = obj.categoryId
                    } catch (e) {
                        console.error("error parsing chat item json object, id: ", id, " error: ", e)
                        close()
                        return
                    }
                }

                onMuteChat: {
                    root.communitySectionModule.muteChat(chatId)
                }

                onUnmuteChat: {
                    root.communitySectionModule.unmuteChat(chatId)
                }

                onMarkAllMessagesRead: {
                    root.communitySectionModule.markAllMessagesRead(chatId)
                }

                onClearChatHistory: {
                    root.communitySectionModule.clearChatHistory(chatId)
                }

                onRequestAllHistoricMessages: {
                    // Not Refactored Yet - Check in the `master` branch if this is applicable here.
                }

                onLeaveChat: {
                    root.communitySectionModule.leaveChat(chatId)
                }

                onDeleteCommunityChat:  root.store.removeCommunityChat(chatId)

                onDownloadMessages: {
                    root.communitySectionModule.downloadMessages(chatId, file)
                }

                onDisplayProfilePopup: {
                    Global.openProfilePopup(publicKey)
                }

                onEditCommunityChannel: {
                    communitySectionModule.editCommunityChannel(
                        chatId,
                        newName,
                        newDescription,
                        newEmoji,
                        newColor,
                        newCategory,
                        channelPosition // TODO change this to the signal once it is modifiable
                    )
                }
            }
        }

        Column {
            id: bannerColumn
            width: scrollView.availableWidth
            anchors.top: communityChatListAndCategories.bottom
            anchors.topMargin: Style.current.padding
            spacing: Style.current.bigPadding

            Loader {
                active: communityData.amISectionAdmin &&
                        (!localAccountSensitiveSettings.hiddenCommunityWelcomeBanners ||
                         !localAccountSensitiveSettings.hiddenCommunityWelcomeBanners.includes(communityData.id))
                width: parent.width
                height: item.height
                sourceComponent: Component {
                    CommunityWelcomeBannerPanel {
                        activeCommunity: communityData
                        store: root.store
                        hasAddedContacts: root.hasAddedContacts
                        communitySectionModule: root.communitySectionModule
                        onManageCommunityClicked: root.manageButtonClicked()
                    }
                }
            } // Loader

            Loader {
                active: communityData.amISectionAdmin &&
                        (!localAccountSensitiveSettings.hiddenCommunityChannelAndCategoriesBanners ||
                         !localAccountSensitiveSettings.hiddenCommunityChannelAndCategoriesBanners.includes(communityData.id))
                width: parent.width
                height: item.height
                sourceComponent: Component {
                        CommunityChannelsAndCategoriesBannerPanel {
                            id: channelsAndCategoriesBanner
                            communityId: communityData.id
                            onAddMembersClicked: {
                                Global.openPopup(createChannelPopup);
                            }
                            onAddCategoriesClicked: {
                                Global.openPopup(createCategoryPopup);
                            }
                        }
                }
            } // Loader

            Loader {
                active: communityData.amISectionAdmin &&
                        (!localAccountSensitiveSettings.hiddenCommunityBackUpBanners ||
                         !localAccountSensitiveSettings.hiddenCommunityBackUpBanners.includes(communityData.id))
                width: parent.width
                height: item.height
                sourceComponent: Component {
                        BackUpCommuntyBannerPanel {
                            id: backupBanner
                            communityId: communityData.id
                            onBackupButtonClicked: {
                                Global.openPopup(transferOwnershipPopup, {
                                    privateKey: communitySectionModule.exportCommunity(communityData.id),
                                    store: root.store
                                })
                            }
                        }
                }
            } // Loader
        } // Column
    } // ScrollView

    Loader {
        id: createChatOrCommunity
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        anchors.bottomMargin: Style.current.padding
        active: communityData.amISectionAdmin
        sourceComponent: Component {
            StatusBaseText {
                id: createChannelOrCategoryBtn
                objectName: "createChannelOrCategoryBtn"
                color: Theme.palette.baseColor1
                height: visible ? implicitHeight : 0
                text: qsTr("Create channel or category")
                font.underline: true
                font.pixelSize: 13
                textFormat: Text.RichText

                MouseArea {
                    anchors.fill: parent
                    cursorShape: Qt.PointingHandCursor
                    onClicked: {
                        adminPopupMenu.showInviteButton = false
                        adminPopupMenu.popup()
                        adminPopupMenu.y = Qt.binding(() => root.height - adminPopupMenu.height
                            - createChannelOrCategoryBtn.height - 20)
                    }
                }
            }
        }
    }

    Component {
        id: createChannelPopup
        CreateChannelPopup {
            anchors.centerIn: parent
            emojiPopup: root.emojiPopup
            onCreateCommunityChannel: function (chName, chDescription, chEmoji, chColor,
                    chCategoryId) {
                root.store.createCommunityChannel(chName, chDescription, chEmoji, chColor,
                    chCategoryId)
            }
            onClosed: {
                destroy()
            }
        }
    }

    Component {
        id: createCategoryPopup
        CreateCategoryPopup {
            anchors.centerIn: parent
            store: root.store
            onClosed: {
                destroy()
            }
        }
    }

    Component {
        id: deleteCategoryConfirmationDialogComponent
        ConfirmationDialog {
            property string categoryId
            confirmButtonObjectName: "confirmDeleteCategoryButton"
            btnType: "warn"
            showCancelButton: true
            onClosed: {
                destroy()
            }
            onCancelButtonClicked: {
                close();
            }
            onConfirmButtonClicked: function(){
                const error = root.store.deleteCommunityCategory(categoryId);
                if (error) {
                    deleteError.text = error
                    return deleteError.open()
                }
                close();
            }
        }
    }

    MessageDialog {
        id: deleteError
        title: qsTr("Error deleting the category")
        icon: StandardIcon.Critical
        standardButtons: StandardButton.Ok
    }

    Component {
        id: transferOwnershipPopup
        TransferOwnershipPopup {
            anchors.centerIn: parent
            onClosed: {
                let hiddenBannerIds = localAccountSensitiveSettings.hiddenCommunityBackUpBanners || []
                if (hiddenBannerIds.includes(root.store.activeCommunity.id)) {
                    return
                }
                hiddenBannerIds.push(root.store.activeCommunity.id)
                localAccountSensitiveSettings.hiddenCommunityBackUpBanners = hiddenBannerIds
            }
        }
    }

    Connections {
        target: root.store.mainModuleInst

        function onOpenCommunityMembershipRequestsPopup(sectionId: string) {
            if(root.store.getMySectionId() != sectionId)
                return

            Global.openPopup(membershipRequestPopup, {
                                 communitySectionModule: root.communitySectionModule
                             })
        }
    }
}