import QtQuick 2.12
import QtQuick.Layouts 1.12
import "../"

Rectangle {
    id: root
    color: "#e6f0ea"
    radius: 6
    property var userData
    property var indexOfDelegate
    height: 40
    onIndexOfDelegateChanged: {
        if (indexOfDelegate % 2 == 0) {
            root.color = "#bed6bc"
        } else {
            root.color = "#bcd6d4"
        }
    }

    clip: true
    onUserDataChanged: {
        id_source.text = userData.source
        id_destination.text = userData.destination
        id_message.text = userData.message
        id_duration.text = userData.duration

        id_modelChild.clear()

        for (var i = 0; i < userData.child.length; i++) {
            id_modelChild.append({
                                     "info": userData.child[i]
                                 })
        }
        idChildList.height = 40 * userData.child.length
    }

    Item {
        id: idTitle
        width: parent.width
        height: 40
        anchors.top: parent.top
        RowLayout {
            anchors.fill: parent
            clip: true

            Item {
                Layout.minimumWidth: 15
                Layout.preferredWidth: 15
            }
            C_DataField {
                id: id_source
                Layout.minimumWidth: 200
                Layout.preferredWidth: 200
                isBold: true
            }
            C_DataField {
                id: id_destination
                Layout.minimumWidth: 200
                Layout.preferredWidth: 200
                isBold: true
            }
            C_DataField {
                id: id_message
                Layout.minimumWidth: 200
                Layout.preferredWidth: 200
                Layout.fillWidth: true
                isBold: true
            }
            C_DataField {
                id: id_duration
                Layout.minimumWidth: 100
                Layout.preferredWidth: 100
                isBold: true
            }
            Item {
                Layout.minimumWidth: 15
                Layout.preferredWidth: 15
            }
        }
        MouseArea {
            property bool isExapnded: false
            anchors.fill: parent
            onClicked: {

                if (isExapnded) {
                    isExapnded = false
                    root.height = 40
                } else {
                    isExapnded = true
                    root.height = 40 + idChildList.height + 15
                }
            }
        }
    }
    Item {
        id: idChildList
        anchors.top: idTitle.bottom
        width: parent.width
        visible: true
        ListView {
            anchors.fill: parent
            model: id_modelChild
            spacing: 0
            clip: true
            delegate: CTableDeligateChild {
                userData: info
                height: 40
                indexOfDelegate: index
            }
        }
        ListModel {
            id: id_modelChild
        }
    }

    Behavior on height {
        NumberAnimation {
            duration: 200
        }
    }
}