// List of people
import QtQuick 2.0
import "qrc:/js/helper.js" as Helperjs
import "qrc:/qml/genericqml"

Rectangle {
    id:contactlistRectangle
    property var contacts:[]
    property var possibleUsers: []
    //y:8*mm
    color: "white"
    border.color: "light grey"
    radius:0.5*mm
    width:groupListView.width
    height:groupListView.height

    ListView {
          id: contactView
          x:mm
          y:6*mm
          width: contactlistRectangle.width-2*mm
          height: contactlistRectangle.height-10*mm
          clip: true
          spacing: 0
          model: contactModel
          delegate: listContact
          }

       ListModel{id: contactModel}

       Component {  id:listContact
               Rectangle{
                  border.color: "#EEEEEE"
                  border.width: 1
                  radius:0.5*mm
                  width:contactView.width
                  height:6*mm
                  Image {
                      id: contactImage
                      x:1
                      y:1
                      width: 5*mm
                      height:5*mm
                      source:(contact.profile_image!="")? "file://"+contact.profile_image : contact.profile_image_url
                      onStatusChanged: if (contactImage.status == Image.Error) {source="qrc:/images/defaultcontact.jpg"}
                      }
                  Text{
                    font.pixelSize: 3*mm
                    anchors.left: contactImage.right
                    anchors.margins: 1*mm
                    text:Qt.atob(contact.name)
                  }
            Text {
                id:selected
                anchors.right:parent.right
                visible: contactlist.indexOf(contact)>-1
                z:4
                text: "\u2713"
                width: 5*mm
                anchors.top: parent.top
                color: "green"
                font.pixelSize: 3*mm
            }

           MouseArea{
                anchors.fill: parent
                onClicked:{
                    if(selected.visible==true){
                                contacts.splice(Helperjs.inArray(contacts,"id",contact.id),1);
                                selected.visible=false
                            }
                            else{
                                contacts.push(contact);
                                selected.visible=true;
                            }
                        }
                 }
            }
           }

    BlueButton {
            id: closeButton
            anchors.top: parent.top
            anchors.topMargin: 1*mm
            anchors.right: parent.right
            anchors.rightMargin: 1*mm
            color:"white"
            text: "\uf057"
            onClicked: {
               groupModelAppend(contacts,function(){
                   contactlistRectangle.destroy()
                 });
            }
    }

    Component.onCompleted: {
        for (var user in possibleUsers){
            contactModel.append({"contact":possibleUsers[user]})
        }
    }
}