import QtQuick 2.0
import QtQuick.Controls 2.9
import QtQuick.Layouts 1.0
import de.itsblue.omobidisplayapp 1.0
import QtQuick.Controls.Material 2.0

ListView {
    id: control



    model: backend.displayTextModel

    delegate: DisplayTextDelegate {
        id: delegate
        width: control.width

        onClicked: {
            popup.edit(model)
        }
    }

    RoundButton {
        anchors {
            bottom: parent.bottom
            horizontalCenter: parent.horizontalCenter
            bottomMargin: height * 0.25
        }

        height: parent.width * 0.15
        width: height

        text: ""

        onClicked: popup.add()

        Text {
            anchors.fill: parent

            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter

            font.pixelSize: height * 0.4

            text: "+"
        }
    }

    Dialog {
        id: popup

        property bool editing
        property var editingModel

        parent: Overlay.overlay

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

        width: parent.width * 0.6

        title: editing ? "Edit item" : "New item"

        standardButtons: Dialog.Ok | Dialog.Cancel

        modal: true

        onAccepted: {
            if(editing) {
                editingModel.active = activeSwitch.checked
                editingModel.text = textTextField.text
                editingModel.runtime = runtimeSpinBox.value
                editingModel.color = colorComboBox.currentText
                editingModel.alignment = alignmentComboBox.currentText
                editingModel.scroll = scrollSwitch.checked
                editingModel.scrollCount = scrollCountSpinBox.value
            }
            else {
                control.model.append(textTextField.text,
                                     activeSwitch.checked,
                                     runtimeSpinBox.value,
                                     colorComboBox.currentText,
                                     alignmentComboBox.currentText,
                                     scrollSwitch.checked,
                                     scrollCountSpinBox.value
                                     )
            }
        }

        contentItem: GridLayout {

            property int rowHeight: 50

            columns: 2
            columnSpacing: 10

            Label {
                font.bold: true
                text: "Active:"
            }

            Switch {
                id: activeSwitch
                Layout.fillWidth: true
            }

            Label {
                font.bold: true
                text: "Text:"
            }

            TextField {
                id: textTextField
                Layout.fillWidth: true
            }

            Label {
                font.bold: true
                text: "Runtime (in s):"
            }

            SpinBox {
                id: runtimeSpinBox
                Layout.fillWidth: true
            }

            Label {
                font.bold: true
                text: "Color:"
            }

            ComboBox {
                id: colorComboBox
                Layout.fillWidth: true
                model: ["white", "blue", "red", "green"]
            }

            Label {
                font.bold: true
                text: "Alignment:"
            }

            ComboBox {
                id: alignmentComboBox
                Layout.fillWidth: true
                model: ["left", "center", "right"]
            }

            Label {
                font.bold: true
                text: "Scroll:"
            }

            Switch {
                id: scrollSwitch
                Layout.fillWidth: true
            }

            Label {
                font.bold: true
                text: "Scroll count:"
            }

            SpinBox {
                id: scrollCountSpinBox
                Layout.fillWidth: true
            }

            Button {
                visible: popup.editing

                Layout.preferredWidth: parent.width * 0.5
                Layout.alignment: Layout.Center

                Material.background: Material.Red
                Material.foreground: "white"

                text: "delete"

                onClicked: {
                    control.model.remove(0)
                    popup.close()
                }
            }
        }

        function edit(model) {
            editingModel = model
            editing = true

            reset()

            activeSwitch.checked = editingModel.active
            textTextField.text = editingModel.text
            runtimeSpinBox.value = editingModel.runtime
            colorComboBox.currentIndex = colorComboBox.model.indexOf(editingModel.color)
            alignmentComboBox.currentIndex = alignmentComboBox.model.indexOf(editingModel.alignment)
            scrollSwitch.checked = editingModel.scroll
            scrollCountSpinBox.value = editingModel.scrollCount

            open()
        }

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

        function reset() {
            activeSwitch.checked = false
            textTextField.text = ""
            runtimeSpinBox.value = 0
            colorComboBox.currentIndex = 0
            alignmentComboBox.currentIndex = 0
            scrollSwitch.checked = false
            scrollCountSpinBox.value = 0
        }
    }
}