import QtQuick 2.0
import QtQuick.Controls 1.3

Item {
id: contactComponent
property var createdAtDate: new Date(contact.created_at)
property var linkUrl: contact.network!=="dfrn"?contact.url:contact.url.replace("profile","dfrn_request")
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:(contact.isFriend==1)? "file://"+contact.profile_image :contact.profile_image_url
        onStatusChanged: if (photoImage.status == Image.Error) {source="qrc:/images/defaultcontact.jpg"}
        }

    Label {
        id: namelabel
        x: 1
        width: wrapper.width-4
        height: 3*mm
        text: contact.screen_name
        elide:Text.ElideRight
        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);
            contactComponent.state="large"}
        }
    Rectangle{
        id: detailsrectangle
        anchors.top: namelabel.bottom
        anchors.topMargin: 2*mm
        opacity: 0

        Flickable{
            id:namelabelflickable
            width: root.width-10*mm
            height:friendsTabView.height-55*mm
            boundsBehavior:Flickable.StopAtBounds
            flickableDirection:Flickable.VerticalFlick
            contentWidth:width
            contentHeight: namelabeltext.height
            clip:true
            Text{
                id:namelabeltext
                //anchors.top: parent.top
                width: namelabelflickable.width
                height: implicitHeight
                font.pixelSize: 3*mm
                textFormat:Text.RichText
                wrapMode: Text.Wrap
                text:"<b>"+qsTr("Description")+": </b> "+Qt.atob(contact.description)+"<br> <b>"+qsTr("Server Type")+":</b> "+contact.location+"<br> <b>"+qsTr("Posts")+":</b> "+contact.statuses_count+
                     "<br> <b>"+qsTr("URL")+":</b> <a href='"+ linkUrl+"'>"+linkUrl+"</a><br> <b>"+
                     qsTr("Created at")+":</b> "+createdAtDate.toLocaleString(Qt.locale())
                onLinkActivated: {
                    Qt.openUrlExternally(link)}
            }
        }

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

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

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

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

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