import QtQuick 2.0
import QtQuick.Controls 1.3
import "qrc:/js/service.js" as Service
import "qrc:/js/layout.js" as Layoutjs

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

                  Label {
                    id: namelabel
                    x: 1
                    width: wrapper.width-2
                    height: 3*mm
                    text: group.groupname
                    
                    color: "#303030"
                    font.pixelSize: 3*mm
                    anchors.centerIn:parent
                   }
                    Button{
                        id:infobutton
                        width: 5*mm
                        height: 5*mm
                        text:"?"
                        anchors.top: namelabel.bottom;anchors.topMargin: 3
                        onClicked:{
                            print("State: "+ groupComponent.state+groupView.contentY);
                            groupComponent.state="large"}
                    }


            Rectangle{
            id: detailsrectangle
            anchors.top: infobutton.bottom
            anchors.topMargin: 2*mm
            opacity: 0
            
            Component {  id:footerComponent
                Rectangle{
                   border.color: "#EEEEEE"
                   border.width: 1
                   width:parent.width
                   height:6*mm
                   Text{
                     font.pixelSize: 3*mm
                     anchors.centerIn: parent
                     text:qsTr("+")
                   }
                   MouseArea{anchors.fill:parent
                     onClicked:{var contactitems="";
                        readData(db,"contacts",root.login.username, function(contacts){for (var i=0;i<contacts.length;i++){
                           contactitems=contactitems+"MenuItem{text:'"+contacts[i].screen_name+"'; onTriggered: groupModel.append(' @"+contacts[i]+"')}"
                        }},"isFriend",0)
                        var menuString="import QtQuick.Controls 1.4; Menu {"+contactitems+"}";
                        print("menustring: "+menuString);
                        var contactlistObject=Qt.createQmlObject(menuString,messageSend,"contactmenuOutput");
                        contactlistObject.popup();
                        Newsjs.addToGroup
                     }}}}

                Component {  id:groupMember
                    Rectangle{
                       border.color: "#EEEEEE"
                       border.width: 1
                       width:parent.width
                       height:6*mm
                       Text{
                         font.pixelSize: 3*mm
                         anchors.left: parent.left
                         text:groupmember.screen_name
                       }
                }}

                ListView{
              id:namelabeltext
              anchors.top: parent.top
              width: root.width-10*mm
              height:wrapper.height-20*mm
              clip: true
              spacing: 0
              footer: footerComponent
              model: groupModel
              delegate: groupMember
              }

          ListModel{id: groupModel}

            }

  Row{
      anchors.top: namelabeltext.bottom
       anchors.topMargin: 2*mm
      spacing:4

      Button{
                        id:photobutton
                        text:"Photos"
                        visible:friend.location=="Friendica"? 1:0
                        onClicked:{root.currentIndex=2;
                                fotostab.active=true;
                            root.fotoSignal(friend) ;
                        }
            }

             Button{
                        id:messagebutton
                        text:"Messages"
                        onClicked:{root.currentIndex=0;
                                                newstab.active=true;
                                                root.messageSignal(friend.id) ;
                        }
                    }

            Button{id:dmbutton
                   visible: friend.following=="true"?true:false
                   text: "DM"
                   onClicked:{root.currentIndex=0;
                       newstab.active=true;
                     root.directmessageSignal(friend.screen_name);
                }
            }

            Button{
                id: closeButton
                text: "close"
                onClicked:{friendComponent.state=""}
            }
  }
        }
        states: [
         State {
                  name: "large"
            PropertyChanges { target: namelabel; font.pixelSize: 4*mm; width:friendsView.width; text:Qt.atob(friend.name)+" (@"+friend.screen_name+")"}
              PropertyChanges { target: friendComponent; z: 2  }
              PropertyChanges { target: wrapper; width:friendsView.width;height:friendsView.height -2*mm-1}
             PropertyChanges { target: photoImage; width:15*mm;height:15*mm }
             PropertyChanges { target:friendComponent.GridView.view ;contentY:friendComponent.y;contentX:friendComponent.x;interactive:false}
             PropertyChanges { target: detailsrectangle; opacity:1  }
             }
         ]
}