import QtQuick
import QtQuick.Layouts
import QtQuick.Controls

GridLayout
{
    property var contacts: null
    columns: 2

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

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

        Item
        {
            Layout.fillWidth: true
        }

        Button
        {
            id: removeContact
            text: qsTr("Entfernen")
            enabled: contactperson.checked
        }

        Button
        {
            id: addContact
            text: qsTr("Hinzufügen")
            enabled: contactperson.checked
            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.AlignHCenter
                color: "yellow"
            }

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

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

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

            header: headline

            delegate: Item
            {
                width: parent.width
                //color: firstname.palette.base
                //border.color: firstname.activeFocus? firstname.palette.highlight: firstname.palette.base
                height: 15

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