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.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)

    anchors.centerIn: parent
    title: qsTr("Edit group name and image")
    width: 480
    height: 610

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

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

        colorSelectionGrid.selectedColor = activeGroupColor

        for (let i = 0; i < colorSelectionGrid.model.length; i++) {
            if(colorSelectionGrid.model[i] === 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
        }

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

        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")

            backgroundComponent:
                StatusLetterIdenticon {
                id: letter
                color: colorSelectionGrid.selectedColor
                name: root.activeGroupName
                height: 100
                width: 100
                letterSize: 64

                StatusRoundButton {
                    id: addButton

                    icon.name: "add"
                    type: StatusRoundButton.Type.Secondary

                    transform: [
                        Translate {
                            x: -addButton.width/2 - 5
                            y: -addButton.height/2 + 5
                        },
                        Rotation { angle: -addRotationTransform.angle },
                        Rotation {
                            id: addRotationTransform
                            angle: 135
                            origin.x: letter.radius
                        },
                        Translate {
                            x: letter.width - 2 * letter.radius
                            y: letter.radius
                        }
                    ]

                    onClicked: imageEditor.chooseImageToCrop()
                }
            }
        }

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

        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))
                }
            }
        }
    }
}