import QMLContactManagerAsync 1.0
import QmlContact 1.0
import Qt 4.6

Rectangle {
    id: topItem
    width: 320
    height: 480
//    border.color: "bg
//    border.width: 5
//    radius: 10
    x: 0
    y: 0

    Script {
        function startup() {
            print("Hello");

            print("Num contacts: " + blah.numContacts);            
            blah.contacts();
        }
        function gotContacts(c) {
            if(c == undefined){
                //print("Error, got null object for gotContacts");
                return;
            }
            print("Got contacts: " + c.name);
            print(" Available actions: " + c.availableActions);
            print(" details: " + c.details);detailsOpacity

            var o = c.values("OnlineAccount");
            var q = c.values("Presence");


            nameModel.append({"name": c.name, "accountPath": "Account: " + o.AccountPath, "presence": "Status: " + q.Presence, "email": c.email});

            var j;
            for(j in c.details){                
                var o = c.values(c.details[j]);
                var i;
                for(i in o){
                    print(" "+ c.details[j] + "/" + i + ": " + o[i]);
                }
            }
        }
        function clickedList(index) {
            mainList.currentIndex = index;
        }
    }
    Component.onCompleted: startup();

    QMLContactManagerAsync {
        id: "blah"

        manager: "memory"
        onDataChanged: print("Data changed!");
        onContactsAdded: print("Contacts added: " + contactIds);
        onContactsLoaded: gotContacts(contact);
    }

    Component {
        id: listdelegate        
        Rectangle {
            id: wrapper            
            border.width: 2
            radius: 5
            height: 40
            width: topItem.width-2;            
            property real detailsOpacity: 0
            Row {
                Item {
                    property real contactId: 0
                }
                Text {
                    id: nameTxt
                    text: name
                }
                Item {
                    id: details
                    opacity: wrapper.detailsOpacity
                    Text {
                        y: nameTxt.height
                        id: emailId
                        text: email
                    }
                    Text {
                        y: emailId.y + emailId.height
                        id: accountPathId
                        text: accountPath
                    }
                    Text {
                        y: accountPathId.y
                        x: accountPathId.x + accountPathId.width + 5
                        id: presenceId
                        text: presence
                    }
                }                
            }
            /*
            Image {
                id: avatar
                height: wrapper.height-6
                source: avatarsource
                x: wrapper.width - avatar.width - 3
                y: 3                
                opacity: details.opacity
                fillMode: Image.PreserveAspectFit
            }*/
            states: State {
                name: "Details"
                PropertyChanges { target: wrapper; height: presenceId.y + presenceId.height }
                PropertyChanges { target: wrapper; detailsOpacity: 1; }
            }

            transitions: Transition {
                from: ""
                to: "Details"
                reversible: true
                ParallelAnimation {
                    NumberAnimation {
                        duration: 300; property: "detailsOpacity" }
                    NumberAnimation {
                        duration: 300; property: "height"  }
                }
            }
            MouseRegion {
                id: mr
                width: topItem.width;
                height: wrapper.height;
                anchors.centerIn: parent;
                onClicked: wrapper.state == "" ? wrapper.state = "Details" :  wrapper.state = "";
            }
        }
    }

    Component {
        id: listhighlight
        Rectangle {
            width: parent.width-8
            height: 40
            color: "lightsteelblue"
            radius: 5
        }
    }

    ListView {
        id: mainList
        model: nameModel
        width: parent.width; height: parent.height
        delegate: listdelegate
        highlight: listhighlight
        //highlightFollowsCurrentItem: true
        focus: true
        anchors.fill: parent
        highlightMoveSpeed: 5000
    }


    ListModel {
        id: nameModel
    }

    // Attach scrollbar to the right edge of the view.
    ScrollBar {
        id: verticalScrollBar
        opacity: 0.1
        orientation: "Vertical"
        position: mainList.visibleArea.yPosition
        pageSize: mainList.visibleArea.heightRatio
        width: 40
        height: mainList.height
        anchors.right: mainList.right
        // Only show the scrollbar when the view is moving.
        states: [
            State {
                name: "ShowBars"; when: mainList.moving
                PropertyChanges { target: verticalScrollBar; opacity: 1 }
            }
        ]
        transitions: [ Transition { NumberAnimation { property: "opacity"; duration: 400 } } ]
    }



}



// ![0]