import QtQuick 2.0
import "qrc:/js/helper.js" as Helperjs
import "qrc:/js/news.js" as Newsjs
import "qrc:/qml/genericqml"

Item {
    id: groupComponent
    property var groupmembers:[]
    //property bool newGroup: false
    function groupModelAppend(groupcontacts,callback){
       for (var n in groupcontacts){
        groupModel.append({"groupmember":groupcontacts[n]});}
        callback()
    }

    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"
        }
        Rectangle{
            id:namelabelRect
            x: 1
            width: wrapper.width-2
            height: 3.5*mm
            anchors.top: photoImage.bottom
            border.color: "light grey"
            TextInput {
                id: namelabel
                anchors.fill: parent
                readOnly: true
                text: group.new?"":group.groupname
                color: "#303030"
                font.pixelSize: 3*mm

            }
        }
        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:{
                //if(group.new){
                    Helperjs.readField("members",root.db,"groups",root.login.username,function(groups){
                    try {groupModel.clear()}catch (e){print(e)}
                    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])
                    } //catch(e){}
                },"groupname",group.groupname);
                //}
                groupComponent.state="large"
            }
        }

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

            Component {
                id:groupMember
                Rectangle{
                    width:parent.width
                    height:6*mm
                    Rectangle{id:memberrectangle
                        border.color: "#EEEEEE"
                        border.width: 1
                        width:parent.width-12*mm
                        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
                            width:parent.width-1
                            text:Qt.atob(groupmember.name)
                        }
                        MouseArea{
                            anchors.fill: parent
                            onClicked:{
                                root.currentIndex=1;
                                friendstab.active=true;
                                root.contactdetailsSignal(groupmember)
                            }
                        }
                       // BlueButton{
                       //     anchors.left: memberrectangle.right
                       //     anchors.margins: 1*mm
                       //     text: "\uf056"
                       //     onClicked:{
                       //         groupModel.remove(index)
                       //     }
                       // }
                    }
                }
            }

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

            ListModel{id: groupModel}

            Row{
                anchors.top: groupListView.bottom
                anchors.topMargin: mm
                spacing: mm
                BlueButton{
                    id: closeButton
                    text: "\uf057"
                    onClicked:{groupComponent.state="";
                        if (group.new){groupsModel.remove(index)}
                    }
                }

//                BlueButton{
//                    id:  addMembers
//                    text:"\uf234"
//                    onClicked: {
//                        Newsjs.listFriends(root.login,root.db,function(userdata){
//                            var newlistcontacts=[];
//                            for (var n in userdata){
//                                if (groupmembers.indexOf(userdata[n].id)==-1){
//                                    newlistcontacts.push(userdata[n])
//                                }
//                            }
//                            var component = Qt.createComponent("qrc:/qml/contactqml/Contactlist.qml");
//                            var contactlistobject = component.createObject(groupListView,{"possibleUsers":newlistcontacts});

//                        })
//                    }
//                }

//                BlueButton{
//                    id: updateButton
//                    text: "\uf0ee"
//                    onClicked:{
//                        var groupobject={};
//                        var groupmembers=[];
//                        for (var i=0;i<groupModel.count;i++){groupmembers.push(groupModel.get(i).groupmember)}
//                        try{ groupobject.id=group.gid} catch(e){};
//                        try{ groupobject.new=group.new} catch(e){};
//                        if (namelabel.text==""){
//                            Helperjs.showMessage(qsTr("Error"),qsTr("No name given"),root)}
//                        else {
//                            groupobject.name=namelabel.text;
//                            groupobject.user=groupmembers;
//                            updateGroup(login,db,groupobject)
//                            groupComponent.state="";
//                        }
//                    }
//                }
//                BlueButton{
//                    id: deleteButton
//                    text: "\uf056"
//                    onClicked:{
//                        Newsjs.deleteGroup(root.login,root.db,root,group,function(){
//                            groupComponent.state="";
//                            groupsModel.remove(index)})
//                    }
//                }
            }
        }
    Component.onCompleted:{if(group.new){groupComponent.state="large"}}
    }

    states: [
        State {
            name: "large"
            PropertyChanges { target: namelabel; font.pixelSize: 4*mm; width:groupsView.width; readOnly:false}
            PropertyChanges { target: namelabelRect; height: 4.5*mm}
            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  }
            }
    ]
}