import QtQuick
import QtQuick.Layouts
import QtQuick.Controls

GridLayout
{
    property var contacts: null
    columns: 2
    Layout.fillWidth: true
    Label
    {
        text: qsTr("Position")
        Layout.alignment: Qt.AlignRight | Qt.AlignTop
    }

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

    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()) && (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() !== ""))
                {
                    contacts[num_contacts] = {}
                    contacts[num_contacts]["title"] = title.currentText
                    contacts[num_contacts]["position"] = posizion.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()
                    contactModel.append({name: title.currentText + " " + firstname.text.trim() + " " + lastname.text.trim(), phone: phonenumber.text.trim(), mobile: mobile.text.trim(),  posizion: posizion.currentText})
                    if (checkFields())
                    {
                        saveBtn.enabled = true
                    }
                    firstname.text = ""
                    lastname.text = ""
                    phonenumber.text = ""
                    mobile.text = ""
                    posizion.currentIndex = 0
                    title.currentIndex = 0

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

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

    ListModel
    {
        id: contactModel
    }

    // Component
    // {
    //     id: headline
    //     Row
    //     {
    //         spacing: 9
    //         Text
    //         {
    //             id: cpname
    //             text: qsTr("Name")
    //             font.bold: true
    //             horizontalAlignment: Text.AlignLeft
    //             color: "white"
    //         }

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

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

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

    //         Text
    //         {
    //             id: cttype
    //             text: qsTr("Typ")
    //             font.bold: true
    //             horizontalAlignment: Text.AlignLeft
    //             color: "white"
    //         }
    //     }
    // }

    Component
    {
        id: highlight
        Rectangle
        {
            width: parent.width
            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
        clip: true

        ScrollView
        {
            id: objContactView
            // Layout.fillWidth: true
            // Layout.preferredHeight: 100
            //Layout.columnSpan: 3
            anchors.fill: mainRect
            ScrollBar.vertical.policy: ScrollBar.AlwaysOn


            ListView
            {
                id: contactView
                anchors.fill: objContactView
                // implicitHeight: objContactView.height
                // implicitWidth: objContactView.width
                model: contactModel
                // header: headline
                highlight: Rectangle { color: "slategray"; radius: 3}
                highlightFollowsCurrentItem: false
                //focus: true test
                onActiveFocusChanged: if(!focus) currentIndex = -1
                delegate: Item
                {
                    width: contactView.width
                    height: 77

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


                    Column
                    {
                        anchors.margins: 5

                        //spacing: 3
                        Text
                        {
                            text: '<b>' + qsTr('Name: ') + '</b>' + model.name
                            horizontalAlignment: Text.AlignLeft
                            color: "white"
                        }
                        Text
                        {
                            text: '<b>' + qsTr('Telefon: ') + '</b>' + model.phone
                            horizontalAlignment: Text.AlignLeft
                            color: "white"
                        }
                        Text
                        {
                            text: '<b>' + qsTr('Handy: ') + '</b>' + model.mobile
                            horizontalAlignment: Text.AlignLeft
                            color: "white"
                        }
                        Text
                        {
                            text: '<b>' + qsTr('Position: ') + '</b>' + model.posizion
                            horizontalAlignment: Text.AlignLeft
                            color: "white"
                        }

                    } // Column
                } // delegate
            } // Listview
        } // Scrollview
    }
}