import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQml.Models 2.1
import QtQuick.Window 2.1

Window {
    id: root
    visible: true
    width: 800
    height: 600

ListView {
    id: view
//    width: 640
//    height: 480
    anchors.fill: parent
    snapMode: ListView.SnapOneItem
    highlightRangeMode: ListView.ApplyRange
    highlightMoveDuration: 250
    focus: false
    orientation: ListView.Horizontal
    boundsBehavior: Flickable.StopAtBounds
//    interactive: false

    Item {
        id: settings
        property int fontSize: 24
        property int padding: 10
    }

    model: ObjectModel {
        Rectangle {
//            anchors.fill: view
            width: view.width
            height: view.height
            color: "#fde9b2"

            TextField {
                id: ip
                anchors.centerIn: parent
                width: 300
                font.pointSize: settings.fontSize
                placeholderText: "127.0.0.1"

                validator: RegExpValidator { regExp: /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/ }

                onAcceptableInputChanged: {
                    if(acceptableInput) {
                        connect.visible = true
                    } else {
                        connect.visible = false
                    }
                }

                Label {
                    text: "Server IP:"
                    anchors.right: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.rightMargin: settings.padding
                    font: parent.font
                }
            }

            TextField {
                id: login
                anchors.top: ip.bottom
                anchors.left: ip.left
                anchors.right: ip.right
                anchors.topMargin: settings.padding
                placeholderText: "You login"
                font: ip.font
                Label {
                    text: "Login:"
                    anchors.right: parent.left
                    anchors.rightMargin: settings.padding
                    anchors.verticalCenter: parent.verticalCenter
                    font: parent.font
                }

            }

            Button {
                id: connect
                text: "Connect"
                visible: false
                anchors.top: login.bottom
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.topMargin: settings.padding
                style: ButtonStyle {
                      label: Text {
                        renderType: Text.NativeRendering
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                        font: ip.font
                        text: control.text
                      }
                }
                onClicked: {
                    console.log(ip.text);
                    view.currentIndex = 1
                    view.update()
                }
            }
        }

        Rectangle {
            width: view.width
            height: view.height
            color: "#ddfdb3"

            TextField {
                id: message
                anchors.bottom: parent.bottom
                anchors.left: parent.left
                anchors.right: send.right
            }

            Button {
                id: send
                width: 100
                anchors.bottom: parent.bottom
                anchors.right: parent.right
                text: "Send"
                onClicked: view.currentIndex = 0
            }

            Rectangle {
                width: 200
                anchors.top: parent.top
                anchors.right: parent.right
                anchors.bottom: send.top
                color: "#ffffff"
            }
        }


    }
}
}