import QtQuick 2.3
import QtQuick.Controls 2.0
import LineItem 1.0
import DemoPlugin 1.0

Item {
id: root
Column {
    Row {
        id: topbar
        Button {
            id: targetMode
            text: "Target"
            flat: false 
            checkable: true
            onClicked: function() {}
        }
    }

    Rectangle {
        height: root.height - topbar.height
        width: root.width
        id: rr
        color: "dimgrey"
        property var scale: 0.5
        
        Flickable {
            id: viewport
            width: parent.width;
            height: parent.height
            contentWidth: 3000; contentHeight: 2000
            flickDeceleration: 10000
            leftMargin: Math.max((width - contentWidth)/2,0)
            topMargin: Math.max((height - contentHeight)/2,0)
            
            clip: true

            Rectangle {
                color: "lightgrey"
                id: contentRect
                anchors.top: parent.top
                anchors.left: parent.left
                width: parent.width/rr.scale
                height: parent.height/rr.scale
                
                transform: Scale {yScale: rr.scale; xScale: rr.scale}
                transformOrigin: Item.TopLeft
                Image {
                    x: 0;y: 0
                    height: 2000
                    width: 3000
                    source: "../playmat_grid_v1.svg"
                    antialiasing: false
                }

                Row {
                    x:0
                    y:0

                    LineItem {
                        height: 2000
                        width: 3000
                        scale: rr.scale
                        handler: DemoPlug.demoPlugin
                    }
                }
                Image {
                    x: DemoPlug.robotPos.x * 1000 - 140
                    y: (2.0 - DemoPlug.robotPos.y) * 1000 - 160
                    height: 320;
                    width: 280;
                    transform: [Rotation {angle: -DemoPlug.robotTheta/( Math.PI/180 ); origin.x: 140; origin.y: 160}]
                    source: "../robot.jpg"
                }
            }
            MouseArea {
                anchors.fill: parent
                propagateComposedEvents: true

                onPressed: (e)=> {
                    e.accepted = targetMode.checked
                    console.log("onPressed")
                }

                onClicked: (e)=> {
                    DemoPlug.postPoint(e.x/rr.scale/1000,2.0 - e.y/rr.scale/1000)
                    e.accepted = true
                    console.log("onClicked")
                }
                
                onWheel: (e) => {
                    if (e.modifiers & Qt.ControlModifier) {
                        rr.scale+=(e.angleDelta.y / 1080);
                        rr.scale = Math.min(Math.max(rr.scale,0.5),10.0)

                        viewport.resizeContent(3000*rr.scale, 2000*rr.scale, Qt.point(e.x,e.y))
                    } else {
                        e.accepted = false
                    }
                }
            }
        }
        MouseArea {
            anchors.fill: parent
            propagateComposedEvents: true

            onPressed: (e)=> {
                e.accepted = false
            }

            
        }

    }
}
}