(function ($) {
    // firestore ref
    var db;

    // auth and setup event handlers
    var init = function () {
        auth();

        $('#ContactTable').on('click', 'button.edit', edit);
        $('#ContactTable').on('click', 'button.remove', remove);
        $('#ContactAdd').click(add);
        $('#ContactForm').submit(save);
    };

    // init on doc ready
    $(document).ready(init);

    // sign-in anonymously
    var auth = function () {
        firebase.auth().signInAnonymously()
        .then(function (result) {
     db = firebase.firestore();
     db.settings({ timestampsInSnapshots: true });

     list();
        })
        .catch(function (error) {
     alert("failed to anonymously sign-in");
        });
    };


    var listTempLi;
    // load list
    var list = function () {
        var ulBody = $('#contacts');
        //remove any data rows
        ulBody.find('li.data').remove();
        //get template row
        var tempLi = ulBody.find('li.data-temp').removeClass('data-temp').addClass('data').remove();
        if (tempLi.length) {
            listTempLi = tempLi;
        } else {
            tempLi = listTempLi;
        }

        // get collection of Contacts
        db.collection("contacts").get().then(function (querySnapshot) {
            querySnapshot.forEach(function (doc) {
                // clone template row and append to table body
                var li = tempLi.clone();
                li.data('id', doc.id);
                var data = doc.data();
                // set cell values from Contact data
                li.find('span[data-prop]').each(function () {
                    var span = $(this);
                    span.text(data[span.data('prop')] || '');
                });
                ulBody.append(li);
            });
        });
    };




    db.collection("contacts").where("name", "Ruben Kroes", true)
    .get()
    .then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
            // doc.data() is never undefined for query doc snapshots
            console.log(doc.id, " => ", doc.data());
        });
    })
    .catch(function(error) {
        console.log("Error getting documents: ", error);
    });




    // on remove
    var remove = function (e) {
        e.preventDefault();
        var id = $(this).parents('tr:first').data('id');
        db.collection("contacts").doc(id).delete().then(function () {
            // reload list
            list();
        })
        .catch(function (error) {
     alert("failed to remove contact");
        });
    };

    // on add
    var add = function (e) {
        e.preventDefault();
        open('');
    };

    // on edit
    var edit = function (e) {
        e.preventDefault();
        var id = $(this).parents('tr:first').data('id');
        open(id);
    };

    // open form modal
    var open = function (id) {
        var modal = $('#ContactModal');
        // set current Contact id
        modal.data('id', id);
        // reset all inputs
        modal.find('input').val('');
        modal.modal('show');

        if (!id) return;

        // get Contact to edit
        db.collection("contacts").doc(id).get().then(function (doc) {
            if (doc.exists) {
                var data = doc.data();
                //set form inputs from Contact data
                modal.find('input[data-prop]').each(function () {
                    var inp = $(this);
                    inp.val(data[inp.data('prop')] || '');
                });

            } else {
                alert("No such record");
            }
        }).catch(function (error) {
            alert("failed to read contact");
        });
    };

    // update or add
    var save = function (e) {
        e.preventDefault();

        var modal = $('#ContactModal');
        var id = modal.data('id');
        var data = {};
        //read values from form inputs
        modal.find('input[data-prop]').each(function () {
            var inp = $(this);
            data[inp.data('prop')] = inp.val();
        });

        // update or add
        (id ? db.collection("contacts").doc(id).update(data) : db.collection("contacts").add(data)).then(function (result) {
            // hide modal and reload list
            modal.modal('hide');
            list();
        })
        .catch(function (error) {
     alert("failed to save contact");
        });
    };

}(jQuery));