import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.9
import QtQuick.Controls.Material 2.0

import de.itsblue.LedDisplayController 1.0

Dialog {
    id: control

    parent: Overlay.overlay

    x: (parent.width - width) / 2
    y: (parent.height - height) / 2

    width: parent.width * 0.9

    modal: true

    title: qsTr("Edit display settings")

    onAccepted: {
            backend.setDisplayCode(codeTextField.value)
            backend.setDisplayName(nameTextField.value)
    }

    contentItem: ColumnLayout {
            id: dataFieldsGridLayout

            width: control.width * 0.9

            TextInputDelegate {
                id: nameTextField
                Layout.fillWidth: true
                required: true
                text: qsTr("Display name\n(needs restart)")
            }

            PasswordInputDelegate {
                id: codeTextField
                Layout.fillWidth: true
                required: true
                text: qsTr("Display code (4 digits)")
                placeholderText: qsTr("Enter new display code")
                repeatPlaceholderText: qsTr("Enter new display code again")
            }
        }


    footer: DialogButtonBox {

        //  alignment: Qt.AlignHCenter
        buttonLayout: DialogButtonBox.GnomeLayout

        Material.background: "transparent"

        Button {
            flat: true
            enabled: nameTextField.value !== ""
            text: "save"
            DialogButtonBox.buttonRole: DialogButtonBox.AcceptRole
        }

        Button {
            flat: true
            text: "cancel"
            DialogButtonBox.buttonRole: DialogButtonBox.RejectRole
        }
    }

    function edit() {

        reset()

        nameTextField.value = backend.bleClient.currentDevice.name

        open()
    }

    function add(model) {
        editingModel = model
        editing = false
        reset()
        open()
    }

    function reset() {
        nameTextField.value = ""
        codeTextField.value = ""
    }
}