import QtQuick
import QtQuick.Layouts
import QtQuick.Controls

GridLayout
{
    property var contacts: null
    columns: 2

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

    ComboBox
    {
        property string name: "contacttype"
        id: contacttype
        Layout.fillWidth: true
        editable: false
        model: [qsTr("Beirat"), qsTr("Hausmeister")]
    }

    Label
    {
        text: qsTr("Anrede")
        Layout.alignment: Qt.AlignRight
    }
    ComboBox
    {
        id: title
        model: [qsTr("Herr"), qsTr("Frau"), qsTr("keine Angabe")]
        Layout.fillWidth: true
    }
    Label
    {
        text: qsTr("Vorname")
        Layout.alignment: Qt.AlignRight
    }
    TextField
    {
        id: firstname
        Layout.fillWidth: true
        placeholderText: "Pflichtfeld"
        placeholderTextColor: "red"
    //     onTextChanged: checkContactFields()
    }
    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: mobile.text ? "" : "Pflichtfeld"
        placeholderTextColor: "red"



    }
    Label
    {
        text: qsTr("Mobil")
        Layout.alignment: Qt.AlignRight
    }
    TextField
    {
        id: mobile
        Layout.fillWidth: true
        placeholderText: phonenumber.text ? "" : "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")
            enabled: false
            onClicked:
            {

                if (contactView.highlightFollowsCurrentItem)
                {
                    delete contacts[contactView.currentIndex]
                    contacts = contacts.filter(elm => elm)
                    contactModel.remove(contactView.currentIndex)
                    contactView.highlightFollowsCurrentItem = false
                    contactView.currentIndex = -1
                    if (Object.keys(contacts).length === 0)
                    {
                        enabled = false
                        console.log(contacts)
                    }
                    checkFields()
                }
            }
        }

        Button
        {
            id: addContact
            text: qsTr("Hinzufügen")
            enabled: firstname.text.trim() && lastname.text.trim() && (phonenumber.text.trim() || mobile.text.trim()) && posizion.text.trim() && (contacts === null || Object.keys(contacts).length < 3)
            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() !== ""  || mobile.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]["mobile"] = mobile.text.trim()
                    contacts[num_contacts]["position"] = posizion.text.trim()
                    contactModel.append({name: title.currentText + " " + firstname.text.trim() + " " + lastname.text.trim(), phone: phonenumber.text.trim(), mobile: mobile.text.trim(),  posizion: posizion.text.trim()})
                    if (checkFields())
                    {
                        saveBtn.enabled = true
                    }
                    firstname.text = ""
                    lastname.text = ""
                    phonenumber.text = ""
                    mobile.text = ""
                    posizion.text = ""

                    removeContact.enabled = true
                    checkFields()
                }
            }
        }
    }

    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: "white"
            }

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

            Text
            {
                id: cpmobile
                text: qsTr("Mobil")
                width: 100
                font.bold: true
                horizontalAlignment: Text.AlignLeft
                color: "white"
            }

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

    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
    {
        id: mainRect
        Layout.fillWidth: true
        implicitHeight: 100
        color: firstname.palette.base
        border.color: firstname.activeFocus? firstname.palette.highlight: firstname.palette.base

        ListView
        {
            id: contactView

            implicitHeight: parent.height
            implicitWidth: parent.width
            model: contactModel
            header: headline
            highlight: Rectangle { color: "grey"}
            highlightFollowsCurrentItem: false


            onActiveFocusChanged: if(!focus) currentIndex = -1
            delegate: Item

            {
                width: contactView.width

                height: 15
                MouseArea
                {
                    anchors.fill: parent
                    onClicked:
                    {
                        contactView.currentIndex = index
                        contactView.highlightFollowsCurrentItem = true
                    }
                }


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


        }
    }
}