import QtQuick 2.12
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import "../../../../imports"
import "../../../../shared"
import "./"


ModalPopup {
    id: popup
    title: qsTr("Join public chat")
    
    onOpened: {
        channelName.text = "";
        channelName.forceActiveFocus(Qt.MouseFocusReason)
    }
    
    Row {
        id: description
        Layout.fillHeight: false
        Layout.fillWidth: true
        width: parent.width

        Text {
            width: parent.width
            font.pixelSize: 15
            text: qsTr("A public chat is where you get to hang out with others, make friends and talk about subjects of your interest.")
            wrapMode: Text.WordWrap
            verticalAlignment: Text.AlignTop
        }
    }

    Rectangle {
        id: channelNameBox
        height: 44
        color: Theme.grey
        anchors.top: description.bottom
        radius: 8
        anchors.right: parent.right
        anchors.left: parent.left

        TextField {
            id: channelName
            placeholderText: qsTr("chat-name")
            anchors.left: parent.left
            anchors.leftMargin: 32
            anchors.verticalCenter: parent.verticalCenter
            font.pixelSize: 15
            background: Rectangle {
                color: "#00000000"
            }
            width: channelNameBox.width - 32
        }

        Image {
            id: image4
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.verticalCenter: parent.verticalCenter
            fillMode: Image.PreserveAspectFit
            source: "../../../img/hash.svg"
        }

        MouseArea {
            id: mouseArea
            anchors.fill: parent
            onClicked : {
                channelName.forceActiveFocus(Qt.MouseFocusReason)
            }
        }
    }

    RowLayout {
        id: row
        Layout.fillHeight: false
        Layout.fillWidth: true
        anchors.right: parent.right
        anchors.rightMargin: 65
        anchors.left: parent.left
        anchors.leftMargin: 65
        anchors.top: channelNameBox.bottom
        anchors.topMargin: 37

        Flow {
            Layout.fillHeight: false
            Layout.fillWidth: true
            spacing: 20

            SuggestedChannel { channel: "ethereum" }
            SuggestedChannel { channel: "status" }
            SuggestedChannel { channel: "general" }
            SuggestedChannel { channel: "dapps" }
            SuggestedChannel { channel: "crypto" }
            SuggestedChannel { channel: "introductions" }
            SuggestedChannel { channel: "tech" }
            SuggestedChannel { channel: "ama" }
            SuggestedChannel { channel: "gaming" }
            SuggestedChannel { channel: "sexychat" }
            SuggestedChannel { channel: "nsfw" }
            SuggestedChannel { channel: "science" }
            SuggestedChannel { channel: "music" }
            SuggestedChannel { channel: "movies" }
            SuggestedChannel { channel: "sports" }
            SuggestedChannel { channel: "politics" }
        }
    }

    footer: Button {
        width: 44
        height: 44
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        background: Rectangle {
            color: "transparent"
        }
        Image {
            source: channelName.text == "" ? "../../../img/arrow-button-inactive.svg" : "../../../img/arrow-btn-active.svg"
        }
        MouseArea {
            id: btnMAJoinChat
            cursorShape: Qt.PointingHandCursor
            anchors.fill: parent
            onClicked : {
                if(channelName.text === "") return;
                    chatsModel.joinChat(channelName.text, Constants.chatTypePublic);
                    popup.close();
                }
            }
        }
    
}