import QtQuick 2.0
import Ubuntu.Components 0.1
import Ubuntu.Components.ListItems 0.1 as ListItem

import QtQuick.Layouts 1.1
import Ubuntu.Settings.Menus 0.1 as Menus

Rectangle {
    color: "white"
    width: 400
    height: 400

    ListView {
        anchors.fill: parent
        model: dummyModel
        delegate: Loader {
            sourceComponent: load(model)
            asynchronous: false
            width: parent.width
            anchors {
                left: parent.left
                right: parent.right
            }


            /////////////////////////////////////////////////////////////////////
            // Switch between these two ways of settings the visible property //
            // and witness how the height > 0 causes the ListView to misplace //
            // the delegates.                                                 //
            ////////////////////////////////////////////////////////////////////
            visible: height > 0
            //visible: status == Loader.Ready


            // Interestingly if the height > 0 is used the Loader and it's item start to get
            // height mismatches. If status == Loader.Ready is used the mismatches disappear
            onLoaded: {
                if (height !== item.height) {
                    console.log("Height Mismatch: loader: " + height + "    item: " + item.height)
                }
            }
        }
    }

    Component {
        id: exampleItem
        ListItem.Empty {
            id: menu
            implicitHeight:   column.implicitHeight
                            + column.anchors.topMargin
                            + column.anchors.bottomMargin

            ColumnLayout {
                id: column
                anchors.fill: parent
                anchors.margins: menu.__contentsMargins
                //width: parent.width
                Label {
                    id: label
                    text: "Item A"
                }
            }

            // these rectangles just demonstrate where the edges of the item are
            Rectangle {
                anchors.top: parent.top
                anchors.horizontalCenter: parent.horizontalCenter
                height: 2
                width: parent.width
                color: "red"
            }
            Rectangle {
                anchors.bottom: parent.bottom
                anchors.horizontalCenter: parent.horizontalCenter
                height: 2
                width: parent.width
                color: "red"
            }
        }
    }

    Component {
        id: standardMenu;

        Menus.StandardMenu {
            text: "Item B"

            // these rectangles just demonstrate where the edges of the item are
            Rectangle {
                anchors.top: parent.top
                anchors.horizontalCenter: parent.horizontalCenter
                height: 2
                width: parent.width
                color: "blue"
            }
            Rectangle {
                anchors.bottom: parent.bottom
                anchors.horizontalCenter: parent.horizontalCenter
                height: 2
                width: parent.width
                color: "blue"
            }
        }
    }

    ListModel {
        id: dummyModel
        ListElement {
            type: "example"
        }
        ListElement {
        }
    }
    property var _map:  {
        "example" : exampleItem,
    }
    function load(modelData) {
        if (modelData.type !== undefined) {
            var component = _map[modelData.type];
            if (component !== undefined) {
                return component;
            }
        }
        return standardMenu;
    }
}