import QtQuick 2.6

import wesual.Stage   1.0
import wesual.Touch 1.0

Item {
    id : virtualKeyboardOverlay

    property int translateToY : 52

    property var filteredDocs : []
    property var autocompleteDocs : []
    property var keyboard

    Keys.onPressed  : portrait_.timerInactive.restart();
    Keys.onReleased : portrait_.timerInactive.restart();

    property string searchString : searchInput.text
    property TextInput inputString : searchInput

    implicitWidth  : parent.width
    implicitHeight : parent.height

    states : [
        State {
            name : "translate"
            when : virtualKeyboardOverlay.visible

            PropertyChanges {
                target : logo
                y : translateToY
            }
        }
    ]

    transitions : Transition {
        NumberAnimation {
            property : "y"
            duration : 300
        }
    }

    onVisibleChanged : {
        if (visible) {
            searchInput.forceActiveFocus();
            filteredDocs = template_.doctors;
        }
    }

    onFilteredDocsChanged : {
        autocompleteDocs = [];
        var docs = [];
        if (filteredDocs.length > 0) {
            for (var i = 0; i <= 4; i++) {
                if (filteredDocs.length >= i) {
                    if (filteredDocs[i]) {
                        docs.push(filteredDocs[i]);
                    }
                }
            }
            autocompleteDocs = docs;
        }
    }

    function filterName(doc) {
        var fullName = doc.nachname + " " + doc.vorname
        var passed = true;
        var searchParams = searchString.split(" ");

        for (var i = 0; i < searchParams.length; i++) {
            if(!fullName.toLowerCase().includes(searchParams[i].toLowerCase())) {
                passed = false;
                break;
            }
        }

        return passed;
    }

    Component.onCompleted : {
        var component = Qt.createComponent("Keyboard.qml");
        keyboard = component.createObject(keyboardOverlay);
    }

    Rectangle {
        id : background

        anchors.fill : parent
        opacity : 0.95
    }

    TapArea {
        anchors.fill : parent

        mouseEnabled : true

        onTap : {
            parent.visible = false;
            parent.enabled = false;
            searchInput.text = ""
        }
    }

    Image {
        id : logo

        anchors {
            horizontalCenter : parent.horizontalCenter
        }

        y : 52

        source : "ambuLogoSmall.png"
    }

    Rectangle {
        id : searchBar

        anchors {
            horizontalCenter : parent.horizontalCenter
            top : logo.bottom
            topMargin : 35
        }

        width  : 758
        height : 72
        radius : 10

        border.width : 2
        border.color : "#afca0b"

        Text {
            id : placeHolderText

            anchors {
                left   : parent.left
                verticalCenter : parent.verticalCenter
                leftMargin : 25
            }

            states : [
                State {
                    name : "empty"
                    when : searchInput.text.length === 0

                    PropertyChanges {
                        target : placeHolderText
                        text   : {
                            if (template_.activeLanguage === "de") {
                                return "Suchen ...";
                            } else if (template_.activeLanguage === "en") {
                                return "Search ...";
                            } else
                                return "Suchen ...";
                        }
                    }
                }
            ]

            color  : "#706f6f"
            width  : 640

            text : ""

            font.pixelSize : 32
            font.family : "Lucida Sans Unicode"
        }

        TextInput {
            id : searchInput

            anchors {
                left   : parent.left
                verticalCenter : parent.verticalCenter
                leftMargin : 25
            }

            color  : "#706f6f"
            width  : 640

            font.pixelSize : 32
            font.family : "Lucida Sans Unicode"

            onTextChanged : {
                searchString = text;
                filteredDocs = template_.doctors.filter(filterName);
            }
        }

        Item {
            id : searchBarButton

            anchors {
                left : searchInput.right
                right : parent.right
                top   : parent.top
                bottom : parent.bottom
            }

            Image {
                id : searchBarIcon

                anchors.centerIn : parent

                source : "SearchThin.png"
            }
        }
    }

    Item {
        id : noResultText

        width : parent.width
        height : 100

        opacity : (autocompleteDocs.length === 0 && searchString.length > 2) ?
                      1 : 0

        anchors.top : searchBar.bottom
        anchors.topMargin : 20
        anchors.horizontalCenter : parent.horizontalCenter

        Column {
            anchors.horizontalCenter : parent.horizontalCenter

            Text {
                text : {
                    if (template_.activeLanguage === "de") {
                        return "Diese Suche ergab leider kein Ergebnis.";
                    } else if (template_.activeLanguage === "en") {
                        return "Sorry we could not find a match for your search.";
                    } else {
                        return "Diese Suche ergab leider kein Ergebnis.";
                    }
                }

                font.pixelSize : 26
                font.family : "Lucida Sans Unicode"

                color  : "#706f6f"
            }

            Row {

                anchors.horizontalCenter : parent.horizontalCenter

                Text {
                    text : {
                        if (template_.activeLanguage === "de") {
                            return "In einem ";
                        } else if (template_.activeLanguage === "en") {
                            return "Browse through ";
                        } else {
                            return "In einem ";
                        }
                    }

                    font.pixelSize : 26
                    font.family : "Lucida Sans Unicode"

                    color  : "#706f6f"
                }
                Text {
                    text : {
                        if (template_.activeLanguage === "de") {
                            return "Fachgebiet ";
                        } else if (template_.activeLanguage === "en") {
                            return "medical fields?";
                        } else {
                            return "Fachgebiet ";
                        }
                    }

                    font.pixelSize : 26
                    font.family : "Lucida Sans Unicode"

                    color  : "#afca0b"
                }
                Text {
                    text : {
                        if (template_.activeLanguage === "de") {
                            return "suchen?";
                        } else if (template_.activeLanguage === "en") {
                            return " ";
                        } else {
                            return "suchen?";
                        }
                    }

                    font.pixelSize : 26
                    font.family : "Lucida Sans Unicode"

                    color  : "#706f6f"
                }
            }
        }
    }


    Column {
        id : searchResultColumn

        visible : searchInput.text.length >= 2
        enabled : searchInput.text.length >= 2

        anchors {
            top : searchBar.bottom
            horizontalCenter : searchBar.horizontalCenter
        }

        width : searchBar.width - 20
        spacing : 1.5

        Repeater {
            model : autocompleteDocs
            delegate : Rectangle {
                id : searchResultDelegate

                width  : 740
                height : 55

                antialiasing : true

                color : "#afca0b"

                Text {
                    anchors.verticalCenter : parent.verticalCenter
                    color : "white"

                    leftPadding : 18

                    text : modelData.nachname + " " + modelData.vorname

                    font.pixelSize : 38
                    font.family : "Stratum2"
                }

                TapArea {
                    anchors.fill : parent

                    mouseEnabled : true

                    onTap : {
                        portrait_.selectedDocs =
                            template_.doctors
                        portrait_.selectedDocsIndex =
                            portrait_.getDocIndex(modelData)
                        portrait_.detailedView = true;
                        virtualKeyboardOverlay.enabled = false;
                    }
                }
            }
        }
    }
}