import QtQuick 2.10
import QtQuick.Controls 2.3
import QtGraphicalEffects 1.0
import QtQuick.Shapes 1.0

import trinity.matrix 1.0

Rectangle {
    id: roomDirectory

    color: myPalette.window

    Rectangle {
        width: 700
        height: parent.height

        anchors.horizontalCenter: parent.horizontalCenter

        color: "transparent"

        BackButton {
            id: backButton

            anchors.top: parent.top
            anchors.topMargin: 15

            anchors.right: parent.right
        }

        Text {
            id: directoryLabel

            anchors.top: parent.top
            anchors.topMargin: 15

            text: "Directory"

            font.pointSize: 25
            font.bold: true

            color: myPalette.text
        }

        TextEdit {
            id: serverEdit

            anchors.top: directoryLabel.bottom
            anchors.topMargin: 10

            width: parent.width

            onEditingFinished: matrix.loadDirectory(text)
        }

        ListView {
            width: parent.width
            height: parent.height - backButton.height

            anchors.top: serverEdit.bottom
            anchors.topMargin: 10

            model: matrix.publicRooms

            clip: true

            delegate: Rectangle {
                width: parent.width
                height: 40 + roomTopic.contentHeight

                color: "transparent"

                RoundedImage {
                    id: roomAvatar

                    width: 32
                    height: 32

                    source: avatarURL
                }

                Text {
                    id: roomName

                    anchors.top: parent.top
                    anchors.topMargin: 10
                    anchors.left: roomAvatar.right
                    anchors.leftMargin: 15

                    text: alias

                    font.bold: true

                    color: myPalette.text
                }

                Text {
                    id: roomTopic

                    width: parent.width

                    anchors.top: roomName.bottom
                    anchors.topMargin: 5
                    anchors.left: roomAvatar.right
                    anchors.leftMargin: 15

                    text: topic

                    wrapMode: Text.Wrap

                    color: myPalette.text
                }

                MouseArea {
                    anchors.fill: parent

                    onClicked: {
                        matrix.joinRoom(id)
                        stack.pop()
                    }
                }
            }
        }
    }
}