import QtQuick          2.3
import QtQuick.Controls 1.2
import QtLocation       5.3
import QtPositioning    5.3

import QGroundControl               1.0
import QGroundControl.ScreenTools   1.0
import QGroundControl.Palette       1.0
import QGroundControl.Controls      1.0
import QGroundControl.FlightMap     1.0

/// Wima Measurement Area Data visuals
Item {
    id: _root

    property var map        ///< Map control to place item in
    property var qgcView    ///< QGCView to use for popping dialogs

    property var areaItem:          object
    signal clicked(int sequenceNumber)

    property var _polygonComponent


    function _addPolygon(){
        if(!_polygonComponent){
            _polygonComponent = polygon.createObject(_root)
            map.addMapItem(_polygonComponent)
        }
    }

    function _destroyPolygon(){
        if(_polygonComponent){
            map.removeMapItem(_polygonComponent)
            _polygonComponent.destroy()
        }
    }

    Component.onCompleted: {
        _addPolygon()
    }

    Component.onDestruction:  {
        _destroyPolygon()
    }

    // Add tiles.
    Repeater {
        id: progressRepeater
        model:  areaItem.tiles

        Item{
            property var _tileComponent
            property int _progress: _root.areaItem.progress[index] ?
                                        _root.areaItem.progress[index] : 0

            Component.onCompleted: {
                _tileComponent = tileComponent.createObject(map)

                _tileComponent.polygon.path =
                        Qt.binding(function(){return object.path})
                _tileComponent.polygon.opacity = 0.6
                _tileComponent.polygon.border.color = "black"
                _tileComponent.polygon.border.width = 1
                _tileComponent.polygon.color =
                        Qt.binding(function(){return getColor(_progress)})
            }

            Component.onDestruction: {
                _tileComponent.destroy()
            }

        }
    }

    // Polygon component.
    Component{
        id:polygon

        MapPolygon {
            path:           object.path;
            border.color:   "black"
            color:          "green"
            opacity:        0.25
        }
    }

    // Tile component.
    Component {
        id: tileComponent
        Item{
            id: root

            property MapPolygon polygon

            MapPolygon{
                id:mapPolygon
                path:           []
            }

            Component.onCompleted: {
                polygon = mapPolygon
                map.addMapItem(mapPolygon)
            }

            Component.onDestruction: {
                map.removeMapItem(mapPolygon)
            }
        }
    }

    function getColor(progress) {
        if (progress === 0)
            return "transparent"
        if (progress < 33)
            return "orange"
        if (progress < 66)
            return "yellow"
        if (progress < 100)
            return "greenyellow"
        return "limegreen"
    }

}