import QtQuick                  2.3
import QtQuick.Controls         1.2
import QtQuick.Controls.Styles  1.4
import QtQuick.Dialogs          1.2
import QtQml                    2.2

import QGroundControl               1.0
import QGroundControl.ScreenTools   1.0
import QGroundControl.Vehicle       1.0
import QGroundControl.Controls      1.0
import QGroundControl.FactControls  1.0
import QGroundControl.Palette       1.0


/// Wima Item edit control
Rectangle {
    id:     _root
    height: editorLoader.visible ? (editorLoader.y + editorLoader.height + (_margin * 2)) : (commandPicker.y + commandPicker.height + _margin / 2)
    color:  interactive ? qgcPal.missionItemEditor : qgcPal.windowShade
    radius: _radius

    property var    map                 ///< Map control
    property var    wimaPlaner
    property var    masterController
    property bool   readOnly            ///< true: read only view, false: full editing view
    property var    rootQgcView
    property int    _index
    property var    areaItem

    signal clicked
    signal remove

    property var    _masterController:          masterController
    property var    _missionController:         _masterController.missionController
    property bool   interactive:                areaItem.wimaAreaInteractive
    property color  _outerTextColor:            interactive ? qgcPal.primaryButtonText : qgcPal.text
    property real   _sectionSpacer:             ScreenTools.defaultFontPixelWidth / 2  // spacing between section headings

    readonly property real  _editFieldWidth:    Math.min(width - _margin * 2, ScreenTools.defaultFontPixelWidth * 12)
    readonly property real  _margin:            ScreenTools.defaultFontPixelWidth / 2
    readonly property real  _radius:            ScreenTools.defaultFontPixelWidth / 2
    readonly property real  _hamburgerSize:     commandPicker.height * 0.75

    QGCPalette {
        id: qgcPal
        colorGroupEnabled: enabled
    }

    FocusScope {
        id:             currentItemScope
        anchors.fill:   parent

        MouseArea {
            anchors.fill:   parent
            onClicked: {
                currentItemScope.focus = true
                _root.clicked()
            }
        }
    }


    QGCLabel {
        id:                     label
        anchors.verticalCenter: commandPicker.verticalCenter
        anchors.leftMargin:     _margin
        anchors.left:           parent.left
        text:                   _index+1
        color:                  _outerTextColor
    }

    QGCColoredImage {
        id:                     hamburger
        anchors.rightMargin:    ScreenTools.defaultFontPixelWidth
        anchors.right:          parent.right
        anchors.verticalCenter: commandPicker.verticalCenter
        width:                  _hamburgerSize
        height:                 _hamburgerSize
        sourceSize.height:      _hamburgerSize
        source:                 "qrc:/qmlimages/Hamburger.svg"
        visible:                interactive
        color:                  qgcPal.text
    }

    QGCMouseArea {
        fillItem:   hamburger
        visible:    hamburger.visible
        onClicked: {
            currentItemScope.focus = true
            hamburgerMenu.popup()
        }

        Menu {
            id: hamburgerMenu

            MenuItem {
                text:           qsTr("Add Measurement Area")
                onTriggered:    wimaPlaner.addMeasurementArea()
            }

            MenuItem {
                text:           qsTr("Add Service Area")
                onTriggered:    wimaPlaner.addServiceArea()
            }

            MenuItem {
                text:           qsTr("Add Corridor")
                onTriggered:    wimaPlaner.addCorridor()
            }

            MenuItem {
                text:           qsTr("Delete")
                onTriggered:    remove()
            }

            /*MenuItem {
                text:           qsTr("Change Area Type ...")
                onTriggered:    commandPicker.clicked()
            }*/


        }
    }

    QGCButton {
        id:                     commandPicker
        anchors.topMargin:      _margin / 2
        anchors.leftMargin:     ScreenTools.defaultFontPixelWidth * 2
        anchors.rightMargin:    ScreenTools.defaultFontPixelWidth
        anchors.left:           label.right
        anchors.top:            parent.top
        visible:                interactive
        text:                   areaItem.objectName;

        Component {
            id: commandDialog

            MissionCommandDialog {
                missionItem: areaItem
            }
        }

        //onClicked: qgcView.showDialog(commandDialog, qsTr("Select Mission Command"), qgcView.showDialogDefaultWidth, StandardButton.Cancel)
    }

    QGCLabel {
        id:                 commandLabel
        anchors.fill:       commandPicker
        visible:            !interactive
        verticalAlignment:  Text.AlignVCenter
        text:               areaItem.objectName;
        color:              _outerTextColor
    }

    Loader {
        id:                 editorLoader
        anchors.leftMargin: _margin
        anchors.topMargin:  _margin
        anchors.left:       parent.left
        anchors.top:        commandPicker.bottom
        source:             areaItem.editorQML
        visible:            interactive

        property var    masterController:   _masterController
        property real   availableWidth:     _root.width - (_margin * 2) ///< How wide the editor should be
        property var    editorRoot:         _root
    }
} // Rectangle