import QtQuick 2.2
import QtQuick.Controls 1.0
import QtQuick.Controls.Styles 1.1
import QtQuick.Layouts 1.1

Rectangle {
    id: imagePane
    // Input properties
    property int currentFrameNumber: 0
    property alias imageSystemName: titleSystem.text
    property alias imageCameraName: titleCamera.text
    property alias imageDate:       titleDate.text
    property alias imageTime:       titleTime.text
    property alias imageVrn:        sightingVrn.text
    // Output property mappedVrnOrigin provides position and size of VRN text box for animation purposes
    property var mappedVrnOrigin: mapToItem(imagePane, 0, 0, 200, 40);  // Arbitrary, but valid initial value
//    onMappedVrnOriginChanged: console.log("mappedVrnOrigin: ", imagePane.mappedVrnOrigin.x, " y ", imagePane.mappedVrnOrigin.y);

    function updateMappedOrigin()
    {
        imagePane.mappedVrnOrigin = vrnOrigin.mapToItem(imagePane, vrnOrigin.x, vrnOrigin.y, vrnOrigin.width, vrnOrigin.height);
//        console.log("updateMappedOrigin: ", vrnOrigin.x, " y ", vrnOrigin.y, " x ", imagePane.mappedVrnOrigin.x, " y ", imagePane.mappedVrnOrigin.y,
//                    " width ", imagePane.mappedVrnOrigin.width, " height ", imagePane.mappedVrnOrigin.height);
    }

    border.width: 2
    border.color: "lightgray"
    radius: 10
    gradient: Gradient {
        GradientStop { position: 0 ; color: "#878787" }
        GradientStop { position: 1 ; color: "#464646" }
    }
    // If the groups relative x position or width has changed then
    // vrnOrigin may have changed in absolute coordinates
    onHeightChanged: {
//        console.log("Height changed:", height);
        updateMappedOrigin();
    }
    onWidthChanged: {
//        console.log("width changed:", width," height ", height," x ", x, " imgtitle ht:", imageTitle.height, "mainImage ht: ", mainImage.height);
        updateMappedOrigin();
    }
    ColumnLayout {
        id: mainColumn
        property bool isPaused: false // nwExposedInstance.isEnginePaused;
        property bool isRecognition: true // nwExposedInstance.isEngineRecognition;
        property bool isLive: true // nwExposedInstance.isEngineLive;
        property int  laneId: 0
        property string textColour: "white"
        spacing: 10;
        anchors.fill: parent
        anchors.margins: 10
        Rectangle {
            id: imageTitle
            height: titleColumn.height
            color: "transparent"
            Layout.fillWidth: true;
            ColumnLayout {
                id: titleColumn
                width: parent.width
                RowLayout {
                    Layout.fillWidth: true; Layout.fillHeight: true;
                    Row {
                        Layout.fillWidth: true; Layout.fillHeight: true;
                        Text { text: "System: "; color: mainColumn.textColour; }
                        Text { id: titleSystem;
//                            text: "High Street South";
                            color: mainColumn.textColour; font.bold: true; }
                    }
                    Row {
                        Layout.fillHeight: true;
                        Layout.alignment: Qt.AlignRight
                        Text { text: "Camera: "; color: mainColumn.textColour; }
                        Text { id: titleCamera
//                            text: (mainColumn.laneId === 0 ? "Exit" : "Entrance");
                            color: mainColumn.textColour; font.bold: true; }
                    }
                }
                Item {
                    Layout.fillWidth: true;
                    height: childrenRect.height - parent.spacing
                    Text { id: titleDate;
//                        text: "3/25/2014";
                        color: mainColumn.textColour; font.bold: true;
                        anchors.left: parent.left
                    }
                    Text {
                        text: (mainColumn.isLive ?
                                   (mainColumn.isPaused ? "Paused" : "Live")
                                 : "Stored") + " " +
                              (mainColumn.isRecognition ? "recognition" : "overview");
                        color: mainColumn.textColour; font.bold: true;
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                    Text { id: titleTime;
//                        text: "09:04:15";
                        color: mainColumn.textColour; font.bold: true;
                        anchors.right: parent.right
                    }
                }
            }
        }
        Rectangle {
            id: mainImage
            border.width: 2
            border.color: "lightgray"
            // Note that there is currently no way to clip the image to match rounded corners of the rectangle
    //        radius: 10
            Layout.fillWidth: true; Layout.fillHeight: true;
            Image { source: "" // "image://nwImageProviderInstance/" + currentFrameNumber
                anchors { fill: parent; margins: parent.border.width; }
//                fillMode: Image.PreserveAspectFit
            }
        }
        Rectangle {
            id: vrnGroup
            height: 40
    //        border.width: 2
    //        border.color: "lightgray"
    //        radius: 10
            color: "transparent"
            Layout.fillWidth: true;
            RowLayout {
                id: vrnRow
                spacing: 5;
                anchors.fill: parent
                Rectangle { id: vrnOrigin
                    Layout.fillWidth: true; Layout.fillHeight: true;
                    color: "darkgray"; radius: 5; border.color: "lightgray";
                    Text { id: sightingVrn;
//                        text: "ABC123";
                        anchors.centerIn: parent;
                        font { pixelSize: parent.height * 2 / 3; bold: true; }
                    }
                }
                Rectangle { Layout.fillWidth: true; Layout.fillHeight: true;
                    color: "darkgray"; radius: 5; border.color: "lightgray";
                }
            }
        }
        Rectangle {
            id: engineControlsGroup
            height: 40
            color: "transparent"
            Layout.fillWidth: true;

            RowLayout {
                // This is a row of engine control buttons
                spacing: 5;
                anchors.fill: parent
                Button {
                    // Start/stop video stream
                    iconSource: (mainColumn.isPaused ? "qrc:/numberworks/play" : "qrc:/numberworks/pause");
                    Layout.fillWidth: true; Layout.fillHeight: true;
                    onClicked: { mainColumn.isPaused = !mainColumn.isPaused; nwExposedInstance.isEnginePaused = mainColumn.isPaused; }
                }
                Button {
                    // Image source is recognition or overview stream for the current lane
                    iconSource: mainColumn.isRecognition ? "qrc:/numberworks/colour" : "qrc:/numberworks/infraRed";
                    Layout.fillWidth: true; Layout.fillHeight: true;
                    onClicked: { mainColumn.isRecognition = !mainColumn.isRecognition; nwExposedInstance.isEngineRecognition = mainColumn.isRecognition; }
                }
                Button {
                    // Event type is stored or live video
                    iconSource: mainColumn.isLive ? "qrc:/numberworks/fromFolder" : "qrc:/numberworks/fromVideo";
                    Layout.fillWidth: true; Layout.fillHeight: true;
                    onClicked: { mainColumn.isLive = !mainColumn.isLive; nwExposedInstance.isEngineLive = mainColumn.isLive; }
                }
                Button {
                    // Select input for next lane
                    iconSource: "qrc:/numberworks/next";   Layout.fillWidth: true; Layout.fillHeight: true;
                    onClicked: mainColumn.laneId = (mainColumn.laneId === 0 ? 1 : 0);
                }
            }
        }
    }
}