import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import com.mistermagister.options 1.0

ApplicationWindow {
    id: applicationWindow
    visible: true
    width: 640
    height: 480
    title: qsTr("Fishbook Messenger 0.0.0.1")

    menuBar: MenuBar {
        style: MenuBarStyle {
            background: Rectangle {
                radius: 0
                color: "#00000000"
                implicitWidth: 300
                implicitHeight: 24
            }
        }

        Menu {
            title: qsTr("File")
            style: MenuStyle {
                itemDelegate.label: Label {
                    color: "white"
                    text: styleData.text
                }

                frame: Rectangle {
                    radius: 0
                    color: "#232629"
                    implicitWidth: 100
                    implicitHeight: 24
                }
            }

            MenuItem {
                text: qsTr("Connect")
            }
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }

    property Options option: null

    ListView {
        id: listView
        width: 200
        height: 460
        anchors.leftMargin: 0
        anchors.left: parent.left
        clip: true
        highlightFollowsCurrentItem: false
        model: buddyModel
        delegate: Item {
            x: 5
            height: 24
            width: listView.width
            Row {
                id: row1
                anchors.verticalCenter: parent.verticalCenter
                Text {
                    id: text1
                    text: username
                    color: '#eff0f1'
                }
                Text {
                    id: text2
                    text: protocol
                    visible: false
                }
            }
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.log(username, protocol, Item.enabled, options)
                    listView.currentIndex = index
                    option = options
//                    window.activeId = text2.text
                }
            }
        }
        highlight: Rectangle
        {
            color:"#41474d"
            focus: true
            y: listView.currentItem.y
            height: 24
            width: listView.width
        }
    }


    ListView {
        id: listView2
        y: 0
        width: 400
        height: parent.height
        anchors.leftMargin: 0
        anchors.left: listView.right
        clip: true
        highlightFollowsCurrentItem: false
        model: option
        delegate: optionsDelegate/*Item {
            x: 5
            height: 24
            width: listView.width
            Row {
                id: row2
                anchors.verticalCenter: parent.verticalCenter
            }
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.log(name)
                    listView.currentIndex = index
//                    window.activeId = text2.text
                }
            }
        }*/
        highlight: Rectangle
        {
            color:"#41474d"
            focus: true
            y: listView.currentItem.y
            height: 24
            width: listView.width
        }
    }

    Component {
        id: stringComponent

        Column {
            Text {
                id: fieldName
                text: name
                color: '#eff0f1'
            }

            TextInput {
                id: fieldValue
                text: value
                width: 200;
                height: 20;
            }
        }
    }

    Component {
        id: passwordComponent

        Column {
            Text {
                id: fieldName
                text: name
                color: '#eff0f1'
            }

            TextInput {
                id: fieldValue
                text: value
                echoMode: TextInput.Password
                width: 200;
                height: 20;
            }
        }
    }

    Component {
        id: intComponent

        Column {
            Text {
                id: fieldName
                text: name
                color: '#eff0f1'
            }

            TextInput {
                id: fieldValue
                text: value
                width: 200;
                height: 20;
                color: "#fff"
                validator: RegExpValidator { regExp : /[0-9]{5}/ }

            }
        }
    }

    Component {
        id: boolComponent

        Column {
            Text {
                id: fieldName
                text: name
                color: '#eff0f1'
            }

            CheckBox {
                id: fieldValue
                checked: value
                onCheckedChanged: option.value = fieldValue.checked;
            }
        }
    }

    Component {
        id: optionsDelegate

        Loader {
            property var itemIndex: index
            property var name: optionName
            property var type: optionType
            property var value: optionValue
            property var defValue: optionDefaultValue

            sourceComponent: switch(type) {
                             case "string":
                                 return stringComponent;
                             case "password":
                                 return passwordComponent;
                             case "int":
                                 return intComponent;
                             case "bool":
                                 return boolComponent;
                             }
        }
    }

    TextField {
        id: textInput
        x: 206
        y: 460
        width: 434
        height: 20
        inputMask: qsTr("")
        placeholderText: "Say something..."
        font.pixelSize: 12
        Keys.onReturnPressed: {
//            Messenger.writeMessage(textInput.text, activeId)
            textInput.text = ""
        }
        style: TextFieldStyle {
            placeholderTextColor: "dimgrey"
            background: Rectangle {
                y: 1
                height: 443
                radius: 0
                color: "#232629"
                implicitWidth: 100
                implicitHeight: 24
            }
        }
    }
}