import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import QtQml.Models 2.14

import shared.controls 1.0
import shared.panels 1.0
import utils 1.0

import StatusQ.Components 0.1
import StatusQ.Controls 0.1
import StatusQ.Controls.Validators 0.1
import StatusQ.Core 0.1
import StatusQ.Popups 0.1
import StatusQ.Popups.Dialog 0.1

StatusDialog {
    id: root
    objectName: "groupChatEdit_main"

    property string activeGroupImageData
    property string activeGroupColor
    property string activeGroupName

    signal updateGroupChatDetails(string groupName, string groupColor, string groupImage)

    title: qsTr("Edit group name and image")
    width: 480
    height: 610

    QtObject {
        id: d
        readonly property int nameCharLimit: 24
    }

    onOpened: {
        groupName.input.edit.forceActiveFocus()
        groupName.text = root.activeGroupName.substring(0, d.nameCharLimit)

        colorSelectionGrid.selectedColor = activeGroupColor

        for (let i = 0; i < colorSelectionGrid.model.length; i++) {
            if(colorSelectionGrid.model[i].toString().toUpperCase() === root.activeGroupColor.toUpperCase())
                colorSelectionGrid.selectedColorIndex = i
        }

        imageEditor.dataImage = activeGroupImageData
    }

    ColumnLayout {
        anchors.fill: parent
        spacing: 20

        StatusInput {
            id: groupName
            input.edit.objectName: "groupChatEdit_name"
            Layout.alignment: Qt.AlignHCenter
            label: qsTr("Name the group")
            charLimit: d.nameCharLimit

            validators: [
                StatusMinLengthValidator {
                    minLength: 1
                    errorMessage: Utils.getErrorMessage(groupName.errors, qsTr("group name"))
                },
                StatusRegularExpressionValidator {
                    regularExpression: Constants.regularExpressions.alphanumericalExpanded
                    errorMessage: Constants.errorMessages.alphanumericalExpandedRegExp
                }
            ]
        }

        StatusBaseText {
            id: imgText
            text: qsTr("Group image")
            leftPadding: groupName.leftPadding - root.padding
        }

        EditCroppedImagePanel {
            id: imageEditor
            objectName: "groupChatEdit_image"
            Layout.preferredWidth: 128
            Layout.preferredHeight: Layout.preferredWidth / aspectRatio
            Layout.alignment: Qt.AlignHCenter

            imageFileDialogTitle: qsTr("Choose an image as logo")
            title: qsTr("Edit group name and image")
            acceptButtonText: qsTr("Use as an icon for this group chat")
        }

        StatusBaseText {
            id: colorText
            text: qsTr("Standard colours")
            leftPadding: groupName.leftPadding - root.padding
        }

        StatusColorSelectorGrid {
            id: colorSelectionGrid
            objectName: "groupChatEdit_color"
            Layout.alignment: Qt.AlignHCenter
            diameter: 40
            selectorDiameter: 16
            columns: 6
            selectedColorIndex: -1
        }

        Item {
            id: spacerItem
            height: 10
        }
    }

    footer: StatusDialogFooter {
        rightButtons: ObjectModel {
            StatusButton {
                id: saveBtn
                objectName: "groupChatEdit_save"
                text: qsTr("Save changes")
                enabled: groupName.text.trim().length > 0 &&
                         ((groupName.text != root.activeGroupName) ||
                          (root.activeGroupColor != colorSelectionGrid.selectedColor) ||
                          (String(imageEditor.source).length > 0))
                onClicked : {
                    updateGroupChatDetails(groupName.text, colorSelectionGrid.selectedColor,
                                           Utils.getImageAndCropInfoJson(imageEditor.source, imageEditor.cropRect))
                }
            }
        }
    }
}