import QtQuick 2.12
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3

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

StatusModal {
    id: popup

    property var communitiesList
    signal setActiveCommunity(string id)
    signal setObservedCommunity(string id)
    signal openCommunityDetail()
    signal importCommunityClicked()
    signal createCommunityClicked()

    onOpened: {
        contentItem.searchBox.input.text = "";
        contentItem.searchBox.input.forceActiveFocus(Qt.MouseFocusReason)
    }

    header.title: qsTr("Communities")
    headerActionButton: StatusFlatRoundButton {
        type: StatusFlatRoundButton.Type.Secondary
        width: 32
        height: 32
        icon.name: "more"

        onClicked: contextMenu.popup(-contextMenu.width+width, height + 4)

        StatusPopupMenu {
            id: contextMenu
            width: 230
            StatusMenuItem {
                icon.name: "download"
                text: qsTr("Access existing community")
                onTriggered: {
                    popup.importCommunityClicked();
                }
            }
        }
    }

    contentItem: Item {
        Column {
            id: contentItem
            anchors.horizontalCenter: parent.horizontalCenter
            property alias searchBox: searchBox

            Item {
                height: 8
                width: parent.width
            }

            StatusInput {
                id: searchBox
                anchors.horizontalCenter: parent.horizontalCenter
                placeholderText: qsTr("Search for communities or topics")
                input.asset.name: "search"
            }

            StatusModalDivider { topPadding: 8 }

            StatusScrollView {
                width: parent.width
                ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
                topPadding: 8
                bottomPadding: 8
                height: 400

                StatusListView {
                    anchors.fill: parent
                    model: communitiesDelegateModel
                    spacing: 4
                    id: communitiesList

                    section.property: "name"
                    section.criteria: ViewSection.FirstCharacter
                    section.delegate: Column {

                        StatusBaseText {
                            anchors.left: parent.left
                            anchors.leftMargin: 16
                            text: section.toUpperCase()
                            font.pixelSize: 15
                            font.weight: Font.Medium
                            color: Theme.palette.directColor1
                        }

                        StatusModalDivider {
                            bottomPadding: 8
                        }
                    }
                }

                DelegateModelGeneralized {
                    id: communitiesDelegateModel
                    lessThan: [
                        function(left, right) {
                            return left.name.toLowerCase() < right.name.toLowerCase()
                        }
                    ]

                    model: popup.communitiesList
                    delegate: StatusListItem {
                        visible: {
                            if (!searchBox.input.text) {
                                return true
                            }
                            const lowerCaseSearchStr = searchBox.input.text.toLowerCase()
                            return model.name.toLowerCase().includes(lowerCaseSearchStr) || model.description.toLowerCase().includes(lowerCaseSearchStr)
                        }
                        height: visible ? implicitHeight : 0
                        anchors.horizontalCenter: parent.horizontalCenter
                        title: model.name
                        subTitle: model.description
                        tertiaryTitle: qsTr("%n member(s)", "", model.members.count)
                        statusListItemTitle.font.weight: Font.Bold
                        statusListItemTitle.font.pixelSize: 17
                        asset.name: model.image
                        asset.isImage: !!model.image
                        asset.isLetterIdenticon: !model.image
                        asset.bgColor: model.color || Theme.palette.primaryColor1

                        onClicked: {
                            if (model.joined && model.isMember) {
                                popup.setActiveCommunity(model.id);
                            } else {
                                popup.setObservedCommunity(model.id);
                                popup.openCommunityDetail();
                            }
                            popup.close()
                        }
                    }
                }
            }
        }
    }

    rightButtons: [
        StatusButton {
            text: qsTr("Create a community")
            onClicked: {
                popup.createCommunityClicked();
                popup.close()
            }
        }
    ]
}