import QtQuick 2.0
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.0

Rectangle {
    id: root
    visible: true
    color: "black"
    property string avatarBorderColor: "#999999"
    property string chatBorderColor: "#30302f"
    property string nickColor: "#86d5fc"
    property string dividerColor: "#2c2c2c"
    property int itemHeightDefault: 68
    property int itemHeightSmall: 32

    ListView {
        id: chatListView
        property int nickWidth: 0
        anchors.fill: parent
        anchors.topMargin: 10
        anchors.leftMargin: 20
        anchors.rightMargin: 20

        model: chatModel

        onCountChanged: {  // scroll to bottom
            chatListView.currentIndex = count - 1
        }

        delegate: Rectangle {
            property int itemHeight: isHead ? root.itemHeightDefault : root.itemHeightSmall;
            height: {
                var implicit = isHead ? textChatMessage.implicitHeight : textChatMessage2.implicitHeight;
                var dynamic_height = implicit + 4;
                if(dynamic_height > itemHeight) return dynamic_height;
                return itemHeight;
            }
            width: parent.width
            color: "black"

            RowLayout {
                spacing: 0
                width: parent.width

                Rectangle {
                    Layout.alignment: Qt.AlignVCenter
                    color: "transparent"
                    Layout.preferredWidth: itemHeightDefault
                    Layout.minimumHeight: itemHeight

                    Image {
                        visible: isHead
                        width: root.itemHeightDefault - 4
                        height: root.itemHeightDefault - 4
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                        id: imgStatus
                        source: {
                            if(name == "_self") return "qrc:///avatar.jpg"
                            else if(name == "Wizzup") return "qrc:///wajer.png"
                            else if(name == "uvos") return "qrc:///uvos.png"
                            return "qrc:///wabbit.png"
                        }
                        smooth: true
                    }
                }

                Item {
                    // spacer
                    Layout.preferredWidth: 10
                    Layout.minimumHeight: itemHeight
                }

                RowLayout {
                    Layout.fillWidth: true

                    Text {
                        id: textNick
                        Layout.alignment: Qt.AlignVCenter
                        Layout.minimumWidth: chatListView.nickWidth
                        textFormat: Text.PlainText
                        text: {
                            if(!isHead) return "";
                            if(name == "_self") return "d4irc";
                            return name
                        }
                        color: nickColor
                        font.pointSize: 18

                        Component.onCompleted: {
                            if(implicitWidth > chatListView.nickWidth)
                                chatListView.nickWidth = implicitWidth
                        }
                    }

                    Text {
                        id: textChatMessage
                        visible: isHead
                        Layout.fillWidth: true
                        Layout.leftMargin: 8
                        Layout.alignment: isHead ? Qt.AlignVCenter : Qt.AlignTop
                        textFormat: Text.PlainText
                        text: message
                        color: "white"
                        wrapMode: Text.WordWrap
                        font.pointSize: 14
                        font.bold: name == "_self" ? true : false;
                    }

                    ColumnLayout {
                        id: textChatMessage2
                        spacing: 6
                        Layout.fillWidth: true
                        Layout.leftMargin: 8
                        visible: !isHead

                        Text {
                            Layout.fillWidth: true
                            textFormat: Text.PlainText
                            text: message
                            color: "white"
                            wrapMode: Text.WordWrap
                            font.pointSize: 14
                            font.bold: name == "_self" ? true : false;
                        }

                        Rectangle {
                            Layout.fillWidth: true
                            Layout.preferredHeight: 1
                            visible: !isHead && !isLast
                            color: root.dividerColor
                        }

                        Item {
                            Layout.fillHeight: true
                            Layout.fillWidth: true
                        }
                    }

                    Item {
                        Layout.minimumHeight: itemHeight
                        Layout.fillWidth: true
                    }

                    Text {
                        Layout.leftMargin: 12
                        Layout.alignment: Qt.AlignVCenter
                        textFormat: Text.PlainText
                        text: hourstr
                        color: "grey"
                        font.pointSize: 12
                    }
                }
            }
        }
    }
}