import QtQuick 1.1
 
Rectangle {
    id: root
    property int indextoEdit: -1
    height: 640
    width: 360
    ListModel {
        id: listModel
        ListElement {
            contactName: "Rozer"
            editable: 1
        }
        ListElement {
            contactName: "Smith"
            editable: 1
        }
        ListElement {
            contactName: "David"
            editable: 1
        }
        ListElement {
            contactName: "John"
            editable: 1
        }
        ListElement {
            contactName: "Smith"
            editable: 1
        }
        ListElement {
            contactName: "Aany"
            editable: 1
        }
        ListElement {
            contactName: "Harry"
            editable: 1
        }
        ListElement {
            contactName: "Bob"
            editable: 1
        }
        ListElement {
            contactName: "Rozer"
            editable: 1
        }
        ListElement {
            contactName: "Abrahim"
            editable: 1
        }
        ListElement {
            contactName: "Jorden"
            editable: 1
        }
        ListElement {
            contactName: "Nick"
            editable: 1
        }
        ListElement {
            contactName: "Peter"
            editable: 1
        }
    }
 
    //ListView delegate
    Component {
        id: contactDelegate
        Rectangle {
            id: contactDelegateRectangle
            height: 80
            width: parent.width
            border.width: 2
 
            Item {
                id: contactDelegateTextRect
                height: parent.height
                width: parent.width
                opacity: editable == 1 ? 1 : 0
                Text {
                    id: contactDelegateText
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.leftMargin: 10
                    text: index + ". " + contactName
                    color: "red"
                }
            }
 
            Item{
                id: contactDelegateEditRect
                height: parent.height
                width: parent.width
                anchors.left: parent.left
                opacity: editable == 0 ? 1 : 0
                z: 1
                TextInput{
                    id: contactDelegateEdit
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    text: contactName
                    width:parent.width - 80
                    z: 1
                }
                Rectangle{
                    id: contactDelegatebtn
                    height: parent.height
                    width: 80
                    anchors.right: parent.right
                    color: "black"
                    border.width: 5
                    Text {
                        id: btnText
                        text: "Ok"
                        color: "white"
                        anchors.fill: parent
                        anchors.centerIn: parent.Center
 
                    }
                    MouseArea {
                        id: innermousearea
                        anchors.fill: parent
                        enabled: true
                        onClicked: {
                            innermousearea.enabled = false
                            mousearea.enabled = true
                            console.log("innermousearea : " + root.indextoEdit)
                            listModel.set(root.indextoEdit, {"editable" : 1, "contactName" : contactDelegateEdit.text})
                            root.indextoEdit = -1
                        }
                    }
                }
            }
            MouseArea {
                id: mousearea
                anchors.fill: parent
                enabled: true
                onClicked: {
                    console.log("index : " + index + " root.indextoEdit : "+ root.indextoEdit)
                }
 
                onPressAndHold: {
                    if(root.indextoEdit == -1){
                        root.indextoEdit = index
                        listModel.set(index, {"editable" : 0})
                        innermousearea.enabled = true
                        mousearea.enabled =false
                    }
                }
            }
 
            states: [
                State {
                    name: "selected"
                    when: mousearea.pressed
                    PropertyChanges {target: contactDelegateRectangle; color: "lightblue"}
                }
            ]
        }
    }
 
//ListView
    ListView {
        id: contactList
        anchors.fill: parent
        model: listModel
        delegate: contactDelegate
    }
}