import QtQuick 2.4
import QtQuick.Controls 2.9
import QtQuick.Layouts 1.9
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

        width: parent.width
        height: parent.height * 0.7

        modal: true

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

        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.scrollSpeed = scrollSpeedSpinBox.value
                editingModel.scrollCount = scrollCountSpinBox.value
                editingModel.brightness = brightnessSpinBox.value
            }
            else {
                control.model.append(textTextField.text,
                                     activeSwitch.checked,
                                     runtimeSpinBox.value,
                                     colorComboBox.currentText,
                                     alignmentComboBox.currentText,
                                     scrollSwitch.checked,
                                     scrollSpeedSpinBox.value,
                                     scrollCountSpinBox.value,
                                     brightnessSpinBox.value
                                     )
            }
        }

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

        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 speed:"
            }

            SpinBox {
                id: scrollSpeedSpinBox
                Layout.fillWidth: true
                from: 0
                to: 10
            }

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

            SpinBox {
                id: scrollCountSpinBox
                Layout.fillWidth: true
            }

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

            SpinBox {
                id: brightnessSpinBox
                Layout.fillWidth: true
                from: 0
                to: 10
            }
        }

        footer: DialogButtonBox {

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

            Button {

                flat: true

                text: "save"

                DialogButtonBox.buttonRole: DialogButtonBox.AcceptRole
            }

            Button {

                flat: true

                text: "cancel"


                DialogButtonBox.buttonRole: DialogButtonBox.RejectRole
            }

            Button {
                visible: popup.editing

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

                flat: false

                text: "delete"


                DialogButtonBox.buttonRole: DialogButtonBox.DestructiveRole
            }
        }

        enter: Transition {
            ParallelAnimation {
                NumberAnimation { property: "opacity"; from: 0; to: 1 }
                NumberAnimation { property: "y"; from: popup.parent.height - popup.height * 0.75; to: popup.parent.height - popup.height }
            }
        }

        exit: Transition {
            ParallelAnimation {
                NumberAnimation { property: "opacity"; from: 1; to: 0 }
                NumberAnimation { property: "y"; from: popup.parent.height - popup.height; to: popup.parent.height - popup.height * 0.75 }
            }
        }

        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
            scrollSpeedSpinBox = editingModel.scrollSpeed
            scrollCountSpinBox.value = editingModel.scrollCount
            brightnessSpinBox = editingModel.brightness

            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
            scrollSpeedSpinBox.value = 5
            scrollCountSpinBox.value = 0
            brightnessSpinBox.value = 10
        }
    }
}