import QtQuick 2.0
import QtQuick.Controls 1.3
import "qrc:/js/layout.js" as Layoutjs
import "qrc:/qml/genericqml"

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.profile_image!="")? "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
        }
    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:{
            contactComponent.state="large";
            var component = Qt.createComponent("qrc:/qml/contactqml/ContactDetailsComponent.qml");
            if (component.status== Component.Ready){
                var contactDetails = component.createObject(wrapper,{"contact": contact})}
            }
        }
    }
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-10*mm}
        PropertyChanges { target: photoImage; width:15*mm;height:15*mm }
        PropertyChanges { target:contactComponent.GridView.view;contentY:contactComponent.y;contentX:contactComponent.x;interactive:false}
        }
]
}