import QtQuick
import QtQuick.Layouts
import QtQuick.Controls

GridLayout
{
    property var contacts: null
    columns: 2

    Label
    {
        text: qsTr("Anrede")
        Layout.alignment: Qt.AlignRight
    }
    ComboBox
    {
        id: title
        model: [qsTr("Herr"),qsTr("Frau")]
        Layout.fillWidth: true
    }
    Label
    {
        text: qsTr("Vorname")
        Layout.alignment: Qt.AlignRight
    }
    TextField
    {
        id: firstname
        Layout.fillWidth: true
        placeholderText: "Pflichtfeld"
        placeholderTextColor: "red"
    }
    Label
    {
        text: qsTr("Nachname")
        Layout.alignment: Qt.AlignRight
    }
    TextField
    {
        id: lastname
        Layout.fillWidth: true
        placeholderText: "Pflichtfeld"
        placeholderTextColor: "red"
    }
    Label
    {
        text: qsTr("Telefonnummer")
        Layout.alignment: Qt.AlignRight
    }
    TextField
    {
        id: phonenumber
        Layout.fillWidth: true
        placeholderText: "Pflichtfeld"
        placeholderTextColor: "red"

    }
    Label
    {
        text: qsTr("Position")
        Layout.alignment: Qt.AlignRight
    }
    TextField
    {
        id: posizion
        Layout.fillWidth: true
        placeholderText: "Pflichtfeld"
        placeholderTextColor: "red"
    }

    RowLayout
    {
        Layout.fillWidth: true
        Layout.columnSpan: 2

        Item
        {
            Layout.fillWidth: true
        }

        Button
        {
            id: removeContact
            text: qsTr("Entfernen")
        }

        Button
        {
            id: addContact
            text: qsTr("Hinzufügen")
            onClicked:
            {
                var num_contacts = 0
                if (contacts !== null && contacts !== undefined) num_contacts = Object.keys(contacts).length
                else contacts = {}
                if (num_contacts < 3 && firstname.text.trim() !== "" && lastname.text.trim() !== "" && phonenumber.text.trim() !== "" && posizion.text.trim() !== "")
                {
                    contacts[num_contacts] = {}
                    contacts[num_contacts]["title"] = title.currentText
                    contacts[num_contacts]["fname"] = firstname.text.trim()
                    contacts[num_contacts]["lname"] = lastname.text.trim()
                    contacts[num_contacts]["phone"] = phonenumber.text.trim()
                    contacts[num_contacts]["position"] = posizion.text.trim()

                    contactModel.append({name: title.currentText + " " + firstname.text.trim() + " " + lastname.text.trim(), phone: phonenumber.text.trim(), posizion: posizion.text.trim()})

                    firstname.text = ""
                    lastname.text = ""
                    phonenumber.text = ""
                    posizion.text = ""
                }
            }
        }
    }

    Label
    {
        text: qsTr("Ansprechpartner")
        Layout.alignment: Qt.AlignRight | Qt.AlignTop
    }

    ListModel
    {
        id: contactModel
    }

    Component
    {
        id: headline
        Row
        {
            Text
            {
                id: cpname
                text: qsTr("Name")
                width: 175
                font.bold: true
                horizontalAlignment: Text.AlignLeft
                color: "black"
            }

            Text
            {
                id: cpphone
                text: qsTr("Telefon")
                width: 100
                font.bold: true
                horizontalAlignment: Text.AlignLeft
                color: "black"
            }

            Text
            {
                id: cppos
                text: qsTr("Position")
                width: 150
                font.bold: true
                horizontalAlignment: Text.AlignLeft
                color: "black"
            }
        }
    }

    Component
    {
        id: highlight
        Rectangle
        {
            width: 230; height: 15
            color: "lightsteelblue"; radius: 5
            y: contactView.currentItem.y
            Behavior on y
            {
                SpringAnimation
                {
                    spring: 3
                    damping: 0.2
                }
            }
        }
    }

    Rectangle
    {
        Layout.fillWidth: true
        implicitHeight: 100
        color: firstname.palette.base
        border.color: firstname.activeFocus? firstname.palette.highlight: firstname.palette.base
        ListView
        {
            id: contactView
            implicitHeight: 500
            implicitWidth: parent.width
            model: contactModel


            header: headline

            highlight: highlight

            highlightFollowsCurrentItem: true
            focus: true

            delegate: Item
            {
                //width: parent.width
                width: contactView.width
                height: 15

                MouseArea
                {
                    id: clickedRow
                    anchors.fill: parent
                    onClicked:
                    {
                        //var currentIndex = index
                        console.log(index)
                        console.log(contactView.currentItem.y)
                    }
                }

                Row
                {
                    //spacing: 9
                    Text
                    {
                        text: model.name
                        width: 175
                        horizontalAlignment: Text.AlignLeft
                    }
                    Text
                    {
                        text: model.phone
                        width: 100
                        horizontalAlignment: Text.AlignLeft
                    }
                    Text
                    {
                        text: model.posizion
                        width: 150
                        horizontalAlignment: Text.AlignLeft
                    }
                }
            }


        }
    }
}