import QtQuick          2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.4
import QtQuick.Dialogs  1.2
import QtQuick.Extras   1.4
import QtQuick.Layouts  1.2

import QGroundControl               1.0
import QGroundControl.ScreenTools   1.0
import QGroundControl.Vehicle       1.0
import QGroundControl.Controls      1.0
import QGroundControl.FactSystem    1.0
import QGroundControl.FactControls  1.0
import QGroundControl.Palette       1.0
import QGroundControl.FlightMap     1.0
import MeasurementComplexItem 1.0 as MCI

Rectangle {
    id:         _root
    height:     visible ? (mainColumn.height + (_margin * 2)) : 0
    width:      availableWidth
    color:      qgcPal.windowShadeDark
    radius:     _radius

    // The following properties must be available up the hierarchy chain
    //property real   availableWidth    ///< Width for control
    //property var    missionItem       ///< Mission Item for editor

    property real   _margin:                    ScreenTools.defaultFontPixelWidth / 2
    property real   _fieldWidth:                ScreenTools.defaultFontPixelWidth * 10.5
    property var    _vehicle:                   QGroundControl.multiVehicleManager.activeVehicle ?
                                                    QGroundControl.multiVehicleManager.activeVehicle :
                                                    QGroundControl.multiVehicleManager.offlineEditingVehicle
    property var _missionItem: missionItem
    property var _areaData: missionItem.areaData

    QGCPalette { id: qgcPal; colorGroupEnabled: true }

    ColumnLayout { // main Column
        id:                 mainColumn
        anchors.margins:    _margin
        anchors.top:        parent.top
        anchors.left:       parent.left
        anchors.right:      parent.right


        QGCLabel {
            id: tipLabel
            Layout.fillWidth:       true
            wrapMode:               Text.WordWrap
            horizontalAlignment:    Text.AlignHCenter
            text:                   qsTr("Use the Area Editor to modify areas.")
            visible:                areaDataEditor.visible
        }

        GridLayout {
            id: editorSelector
            Layout.fillWidth: true
            columnSpacing:    _margin
            rowSpacing:       _margin

            QGCButton{
                text: "Open Area Editor"
                visible: parameterEditor.visible
                Layout.fillWidth: true
                Layout.columnSpan: 2
                onClicked:{
                    areaDataEditor.checked = true
                }
            }

            QGCButton{
                text: "Done"
                Layout.fillWidth: true
                visible: areaDataEditor.visible
                onClicked: {
                    if (_areaData.isCorrect()){
                        parameterEditor.checked = true
                    }
                }
            }

            QGCButton{
                text: "Abort"
                visible: areaDataEditor.visible
                Layout.fillWidth: true
                onClicked:{
                    missionItem.abortEditing()
                    parameterEditor.checked = true
                }
            }

        } // editorSelector

        ExclusiveGroup { id:editorGroup}

        MCI.ParameterEditor{
            id:parameterEditor

            missionItem: _root._missionItem
            availableWidth: mainColumn.width
            visible: checked

            property ExclusiveGroup group: editorGroup

            onGroupChanged: {
                if (group){
                    group.bindCheckable(parameterEditor)
                }
            }

            Component.onCompleted: {
                checked = false
            }
        }

        MCI.AreaDataEditor{
            id:areaDataEditor

            missionItem: _root._missionItem
            availableWidth: mainColumn.width
            visible: checked

            property ExclusiveGroup group: editorGroup

            onGroupChanged: {
                if (group){
                    group.bindCheckable(areaDataEditor)
                }
            }

            Component.onCompleted: {
                checked = true
            }
        }

    } // main Column
} // Rectangle
