import QtQuick 2.0

import Qt.labs.settings 1.0
import QtQuick.Layouts 1.11
import QtQuick.Controls 1.4
import QGroundControl.Controls 1.0
import QGroundControl.FactControls 1.0
import QGroundControl.ScreenTools 1.0

import QGroundControl.Palette 1.0

Rectangle {
    id: _root

    width: mainColumn.width
    height: mainColumn.height
    color: qgcPal.windowShadeDark

    property bool editing: missionItem.editing
    property var missionItem: undefined
    property int availableWidth: 300
    property bool areasCorrect: false
    property string errorString: ""

    property var _areaData: missionItem.areaData
    property real _margin: ScreenTools.defaultFontPixelWidth / 2

    Component.onCompleted: {
        console.assert(missionItem !== undefined,
                       "please set the missionItem property")
        if (editing) {
            areasCorrectTimer.start()
        }
    }

    onEditingChanged: {
        if (editing){
            areasCorrectTimer.start()
        } else {
            areasCorrectTimer.stop()
        }
    }

    ColumnLayout {
        id: mainColumn
        width: availableWidth
        spacing: _margin

        QGCButton {
            id: editButton
            text: _root.editing ? qsTr("Done") : qsTr("Edit")
            enabled: (_root.editing && _root.areasCorrect) || !_root.editing
            onClicked: {
                if (_root.editing) {
                    _root.missionItem.stopEditing()
                } else {
                    _root.missionItem.startEditing()
                }
            }
            Layout.fillWidth: true
        }

        GridLayout {

            width: availableWidth
            columnSpacing: _margin
            Layout.fillWidth: true
            rowSpacing: _margin
            columns: 2
            enabled: _root.editing

            QGCLabel {
                text: _root.errorString
                wrapMode: Text.WordWrap
                horizontalAlignment: Text.AlignLeft
                color: "orange"
                Layout.columnSpan: parent.columns
                Layout.fillWidth: true
                visible: !_root.areasCorrect
            }

            ExclusiveGroup {
                id: areaGroup
            }

            Repeater {
                id: areaSelector

                property int selectedIndex: -1

                model: _missionItem.areaData.areaList
                delegate: QGCRadioButton {
                    text: object.objectName
                    Layout.fillWidth: true
                    Layout.columnSpan: 2

                    onCheckedChanged: {
                        if (checked) {
                            areaSelector.selectedIndex = index
                        }
                    }

                    Component.onCompleted: {
                        if (index === 0) {
                            checked = true
                        }
                        object.interactive = Qt.binding(function () {
                            return checked && _root.editing && _missionItem.isCurrentItem
                        })
                    }
                }
            } // area Repeater

            ColumnLayout {
                id: editorParent
                Layout.fillWidth: true
                Layout.maximumWidth: parent.width
                Layout.columnSpan: 2
            }

            Repeater {
                id: areaEditorRepeater

                Layout.maximumWidth: parent.width

                model: _missionItem.areaData.areaList
                delegate: Item {
                    id: editor
                    visible: index == areaSelector.selectedIndex

                    property var _visualItem: undefined
                    property var geoArea: object

                    Component.onCompleted: {
                        if (geoArea.editorQML && !_visualItem) {
                            var component = Qt.createComponent(
                                        geoArea.editorQML)
                            if (component.status === Component.Error) {
                                console.log("Error loading Qml: ",
                                            geoArea.editorQML,
                                            component.errorString())
                            } else {
                                _visualItem = component.createObject(
                                            editorParent, {
                                                "geoArea": editor.geoArea,
                                                "visible": Qt.binding(
                                                               function () {
                                                                   return editor.visible
                                                               }),
                                                "availableWidth": Qt.binding(
                                                                      function () {
                                                                          return editorParent.width
                                                                      })
                                            })
                            }
                        }
                    }

                    Component.onDestruction: {
                        if (_visualItem) {
                            _visualItem.destroy()
                        }
                    }
                } // editor
            } // areaEditorRepeater

            SectionHeader {
                id: commandsHeader
                Layout.fillWidth: true
                Layout.columnSpan: parent.columns
                text: qsTr("Commands")
            }

            GridLayout {
                columnSpacing: _margin
                rowSpacing: _margin
                columns: 2
                Layout.columnSpan: 2
                Layout.fillWidth: true
                visible: commandsHeader.checked

                QGCButton {
                    text: "Intersection"
                    Layout.fillWidth: true
                    Layout.columnSpan: parent.columns
                    onClicked: {
                        _areaData.intersection()
                    }
                }

                QGCButton {
                    text: "Reset"
                    Layout.fillWidth: true
                    Layout.columnSpan: parent.columns
                    onClicked: {
                        missionItem.reset()
                    }
                }
            }

            SectionHeader {
                id: hintHeader
                Layout.fillWidth: true
                Layout.columnSpan: parent.columns
                text: qsTr("Hints")
            }

            GridLayout {
                columnSpacing: _margin
                rowSpacing: _margin
                columns: 2
                Layout.columnSpan: 2
                Layout.fillWidth: true
                visible: hintHeader.checked

                QGCLabel {
                    id: hintLabel
                    wrapMode: Text.WordWrap
                    horizontalAlignment: Text.AlignLeft
                    text: qsTr("Use the Intersection button to clip the Measurement Area(s).
Use the Reset button to restore the areas to the state before entering this tab."
)
                    Layout.fillWidth: true
                    Layout.columnSpan: parent.columns
                }
            }

            Timer {
                id: areasCorrectTimer
                running: false
                interval: 100
                repeat: true

                onTriggered: {
                    _root.areasCorrect = _missionItem.areaData.isCorrect(
                                false /*show gui message*/
                                )
                    if (!_root.areasCorrect) {
                        _root.errorString = _missionItem.areaData.errorString
                    } else {
                        _root.errorString = ""
                    }
                }
            }

            Settings {
                property alias showHint: hintHeader.checked
            }
        } // GridLayout
    } // GridLayout
} // Rectangle