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: friendComponent
       property date createdAtDate:  new Date(friend.created_at)

        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:"file://"+ friend.profile_image
                  }

                  Label {
                    id: namelabel
                    x: 1
                    width: wrapper.width-2
                    elide: Text.ElideRight
                    height: 3*mm
                    text: friend.screen_name
                    anchors.topMargin: 0
                    anchors.left: photoImage.left
                    color: "#303030"
                    font.pixelSize: 3*mm
                    anchors.top: photoImage.bottom
                   }
                    Button{
                        id:infobutton
                        width: 5*mm
                        height: 5*mm
                        text:"?"
                        anchors.left: photoImage.right
                        anchors.leftMargin: 3
                        anchors.topMargin: 3
                        anchors.top: parent.top
                        onClicked:{
                            print("State: "+ friendComponent.state+friendsView.contentY);
                            friendComponent.state="large"}
                    }


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

            Text{
               id:namelabeltext
              anchors.top: parent.top
               width: root.width-10*mm
               height: namelabeltext.implicitHeight
               font.pixelSize: 3*mm
               textFormat:Text.RichText
               wrapMode: Text.Wrap
                text:"<b>"+qsTr("Description")+": </b> "+Qt.atob(friend.description)+"<br> <b>"+qsTr("Server Type")+":</b> "+friend.location+"<br> <b>"+qsTr("Posts")+":</b> "+friend.statuses_count+
                     "<br> <b>"+qsTr("URL")+":</b> <a href='"+ friend.url+"'>"+friend.url+"</a><br> <b>"+
                     qsTr("Created at")+":</b> "+createdAtDate.toLocaleString(Qt.locale())
                onLinkActivated: {
                    Qt.openUrlExternally(link)}
            }

  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  }
             }
         ]
}