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

Rectangle {
    id: imagePane
    property var localVrnOrigin
    property string imageVrn: "starting"
    onImageVrnChanged: {
        console.log("new vrn:", imageVrn);
        vrnListModel.insert(0, listDelegate.createObject(vrnListModel, { "width": list.width } ));
    }
    border.width: 2
    border.color: "lightgray"
    radius: 10
    gradient: Gradient {
        GradientStop { position: 0 ; color: "#878787" }
        GradientStop { position: 1 ; color: "#464646" }
    }
    ColumnLayout {
        id: mainColumn
        property string textColour: "white"
        spacing: 10;
        anchors.fill: parent
        anchors.margins: 10
        Rectangle {
            height: titleText.height
            color: "transparent"
            Layout.fillWidth: true;
            Text { id: titleText; text: "Sightings: "; color: mainColumn.textColour; }
        }
        Rectangle {
            id: lvRectangle
            border.width: 2
            border.color: "lightgray"
            Layout.fillWidth: true; Layout.fillHeight: true;
            color: "transparent"
            ListView {
                id: list
                // sourceOrigin provides the relative location and size of the VRN text box
                property var sourceOrigin: imagePane.mapToItem(list, imagePane.localVrnOrigin.x, imagePane.localVrnOrigin.y, imagePane.localVrnOrigin.width, imagePane.localVrnOrigin.height);
                onSourceOriginChanged: console.log("sourceOrigin: ", sourceOrigin.x, " y ", sourceOrigin.y, " width ", sourceOrigin.width, " height ", sourceOrigin.height)
                property bool scrolled: false
                property int animationDuration: 10000 //500 //10000
                property int itemHeight: 80
                anchors { fill: parent; margins: parent.border.width; }
//                model: sightingsModelInstance
                model: ListModel { id: vrnListModel; }
                delegate: listDelegate //SightingsListDelegate { }
                // clip when we have no animation running
                clip: true
                cacheBuffer: height * 2
                onMovementStarted: { scrolled = true; currentIndex = -1 }
                onMovementEnded:   { scrolled = false }
                onCountChanged:    { currentIndex = -1 }
                add: Transition {
                    id: trans
                    onRunningChanged: {
                        // Don't clip whilst animation is running or we don't see the item sliding over the SightingPanel
                        // but clip when it's finished to clip items scrolled out of the bottom of the list
                        list.clip = (running ? false : true);
                        if (!running) {
                            // In case animation gets interrupted eg. scrolling (alwaysRunToEnd doesn't do it!)
                            // or orientation changes mid-way though an animation
                            trans.ViewTransition.item.width  = list.width;
                            trans.ViewTransition.item.height = list.itemHeight;
                        }
                    }
                    NumberAnimation { properties: "x"; from: list.sourceOrigin.x; to: 20; duration: list.animationDuration }
                    NumberAnimation { properties: "y"; from: list.sourceOrigin.y; duration: list.animationDuration }
                    NumberAnimation { properties: "width"; easing.type: Easing.InCubic;
                        from: list.sourceOrigin.width; to: list.width; duration: list.animationDuration;
                    }
                    NumberAnimation { properties: "height"; from: list.sourceOrigin.height; to: list.itemHeight; duration: list.animationDuration }
//                    NumberAnimation { properties: "opacity"; from: 0; to: 1; duration: list.animationDuration }
                }
                addDisplaced: Transition { NumberAnimation { properties: "x,y"; duration: list.animationDuration } }
               // ScrollBar component attached to the list
                Item {
                    id: scrollbar
                    property ListView list: list
                    anchors.right: list.right;
                    anchors.top: list.top
                    width: 8;
                    height: list.height;
                    opacity: 0
                    visible: list.contentHeight > list.height
                    clip: true

                    Rectangle {
                        anchors.fill: parent;
                        color: "black";
                        opacity: 0.33
                    }
                    BorderImage {
//                        source: "qrc:/scrollbar"
                        border { left: 1; right: 1; top: 1; bottom: 1 }
                        x: 2
                        y: list.contentY * scrollbar.height / list.contentHeight
                        width: parent.width - 4
                        height: list.height * list.height / list.contentHeight
                    }
                    states: State {
                        name: "visible"
                        when: list.movingVertically
                        PropertyChanges {
                            target: scrollbar;
                            opacity: 1.0
                        }
                    }
                    transitions: Transition {
                        from: "visible"; to: ""
                        NumberAnimation {
                            properties: "opacity";
                            duration: 500
                        }
                    }
                }
            }
        }
    }

    // Delegate for defining a template for an item in the list
    Component {
        id: listDelegate
        Rectangle {
            id: background
//            width: ListView.view.width
            width: parent.width
            height: list.itemHeight
//            onYChanged: if (y % 10 == 0) console.log("Change y ", "vrn", " y ", y);
            gradient: list.currentIndex === list.index && !list.scrolled ? selected : deselected
            Text {
                text: imagePane.imageVrn === null ? "" : String(imagePane.imageVrn)
//                text: "BIG043"
                anchors {
                    left: parent.left; leftMargin: 20
                    right: /* arrow */parent.right; rightMargin: 20
                    verticalCenter: parent.verticalCenter
                }
                font.pixelSize: parent.height / 3
                elide: Text.ElideRight
            }
            /*
            Image {
                id: arrow
                source: "qrc:/back"
                mirror: true    // Back icon becomes forward!
                anchors {
                    verticalCenter: parent.verticalCenter
                    right: parent.right; rightMargin: 20
                }
            }
            */
            Rectangle {
                width: parent.width
                height: 1
                color: "#BBBBBB"
                anchors.bottom: parent.bottom
            }
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    itemSelected(index)
                }
                onPressed: {
                    list.currentIndex = index
//                    console.log("add final: x ", list.finalVrnOrigin.x, " y ", list.finalVrnOrigin.y, " width ", list.finalVrnOrigin.width, " height ", list.finalVrnOrigin.height);
//                    console.log("add local: x ", imagePane.localVrnOrigin2.x, " y ", imagePane.localVrnOrigin2.y, " width ", imagePane.localVrnOrigin2.width, " height ", imagePane.localVrnOrigin2.height);
                    console.log("Trans running: ", trans.running)
                }
                onReleased: {
                    list.currentIndex = -1
                }
            }
        }
    }

    // Highlight for selected list item
    Gradient {
        id: selected
        GradientStop { position: 0.0; color: "#6E84A2" }
        GradientStop { position: 0.33; color: "#464646" }
        GradientStop { position: 0.66; color: "#464646" }
        GradientStop { position: 1.0; color: "#6E84A2" }
    }
    // Normal colour for list item
    Gradient {
        id: deselected
        GradientStop { position: 0 ; color: "#878787" }
        GradientStop { position: 1 ; color: "#464646" }
    }

    // Item clicked on the list.
    // Show either sub-list or the details screen
    function itemSelected(index) {
        var component = Qt.createComponent("DetailsScreen.qml");
        if (component.status === Component.Ready) {
            var detailsScreen = component.createObject(main);
            detailsScreen.titleText = "System: " + list.model[index].system_id
            detailsScreen.index = index
            detailsScreen.currentObject = list.model[index]
            detailsScreen.previousScreen = screen
            detailsScreen.state = "visible"
            screen.state = "before"
        }
    }
}