import QtQuick 2.0
import QtQuick.Controls 1.3
import "qrc:/js/helper.js" as Helperjs
import "qrc:/qml/genericqml"

    Item {
        id: groupComponent
        Rectangle {
                  id: wrapper
                  width: 16*mm
                  height: 15*mm
                  border.color:  "grey"
                  color:"white"

                  Image {
                      id: photoImage
                      x:1
                      y:1
                      width: 10*mm
                      height:10*mm
                      source:"qrc:/images/defaultcontact.jpg"
                      }
                  Label {
                    id: namelabel
                    x: 1
                    width: wrapper.width-2
                    height: 3*mm
                    text: group.groupname
                    
                    color: "#303030"
                    font.pixelSize: 3*mm
                    anchors.top: photoImage.bottom
                   }
                    BlueButton{
                        id:infobutton
                        width: 5*mm
                        height: 5*mm
                        color:"transparent"
                        text:"?"
                        anchors.left: photoImage.right
                        anchors.leftMargin: 3
                        anchors.topMargin: 3
                        anchors.top: parent.top
                        onClicked:{
                            Helperjs.readField("members",root.db,"groups",root.login.username,function(groups){
                            try {groupModel.clear()}catch (e){print(e)}
                            var groupmembers=JSON.parse(groups);
                            for (var user in groupmembers){
                                Helperjs.readData(root.db,"contacts",root.login.username,function(userdata){
                                    if (userdata[0]){groupModel.append({"groupmember":userdata[0]})}
                                },"id",groupmembers[user])}
                            },"groupname",group.groupname);
                            groupComponent.state="large"}
                    }


            Rectangle{
            id: detailsrectangle
            anchors.top: namelabel.bottom
            anchors.topMargin: 2*mm
            opacity: 0

            Component {  id:groupMember
                    Rectangle{
                       border.color: "#EEEEEE"
                       border.width: 1
                       width:parent.width
                       height:6*mm
                       Image {
                           id: memberImage
                           x:1
                           y:1
                           width: 5*mm
                           height:5*mm
                           source:(groupmember.isFriend==1)? "file://"+groupmember.profile_image :groupmember.profile_image_url
                           onStatusChanged: if (photoImage.status == Image.Error) {source="qrc:/images/defaultcontact.jpg"}
                           }
                       Text{
                         font.pixelSize: 3*mm
                         anchors.left: memberImage.right
                         anchors.margins: 1*mm
                         text:Qt.atob(groupmember.name)
                       }
                }}

              ListView{
              id: groupListView
              x:1
              //anchors.top: parent.top
              width: root.width-10*mm
              height:groupsView.height -28*mm
              clip: true
              spacing: 2
              model: groupModel
              delegate: groupMember
              }

          ListModel{id: groupModel}

          BlueButton{
              id: closeButton
              anchors.top: groupListView.bottom
              x:1
              text: qsTr("close")
              onClicked:{groupComponent.state=""}
        }
    }
}

        states: [
         State {
            name: "large"
            PropertyChanges { target: namelabel; font.pixelSize: 4*mm; width:groupsView.width}
            PropertyChanges { target: groupComponent; z: 2  }
            PropertyChanges { target: wrapper; width:groupsView.width;height:groupsView.height -2*mm-1}
            PropertyChanges { target: photoImage; width:15*mm;height:15*mm }
            PropertyChanges { target:groupComponent.GridView.view ;contentY:groupComponent.y;contentX:groupComponent.x;interactive:false}
            PropertyChanges { target: detailsrectangle; opacity:1  }
            }
         ]
}