Countries & Towns

function attachEvents() {

    const kinveyAppId = "kid_SySlm5uGg";
    const serviceUrl="https://baas.kinvey.com/appdata/" + kinveyAppId;
    const kinveyUsername="kem";
    const kinveyPassword="kem";
    const base64auth=btoa(kinveyUsername+":"+kinveyPassword);
    const authHeaders = {"Authorization": "Basic "+ base64auth};



    function showView(viewName) {
        $('main > section').hide();
        $('#' + viewName).show()
    }

    function loadCountriesClicked() {
        $('#countries').empty();
        $.ajax({
            method: "GET",
            url: serviceUrl + "/countries",
            headers: authHeaders,
            success: displayCountries,
            error: handleAjaxError
        });
        function displayCountries(countries) {
            let table = $(
                `<table>
                <tr>
                    <th>Country</th>
                    <th>Actions</th>
                </tr>
            </table>`);

            for (let country of countries) {
                let tr = $('<tr>');
                displayTableRow(tr, country);
                tr.appendTo(table);
            }

            $('#countries').append(table);
            $('#countries').append($("<input type='text' name='countryName'/>"));
            $('#countries').append($("<a href='#'>[Add Country]</a>").click(createContry));


            function displayTableRow(tr, country) {
                let links = [];
                let viewTowns = $("<a href='#'>[View towns]</a>").click(function () {
                    showTowns(country._id)
                });

                let deleteLink = $("<a href='#'>[Delete]</a>").click(function () {
                    deleteTownsInCountry(country._id)
                });
                let editLink = $("<a href='#'>[Edit]</a>")
                //     .click(function () {
                //     loadCountry(ForEdit(country._id)
                // });
                links.push(viewTowns);
                links.push(' ');
                links.push(deleteLink);
                links.push(' ');
                links.push(editLink);

                tr.append(
                    $("<td>").text(country.name),
                    $("<td>").append(links)
                )
            }
        }
    }

    function showTowns(countryId) {
        $('#formShowTowns').empty();
        showView('viewTowns');
        $.ajax({
            method: "GET",
            url: serviceUrl + `/towns/?query={"country":"${countryId}"}`,
            headers: authHeaders,
            success: loadViewTownsSuccess,
            error: handleAjaxError
        });

        function loadViewTownsSuccess(towns) {
            let table = $(
                `<table>
                <tr>
                    <th>Town</th>
                    <th>Actions</th>
                </tr>
            </table>`);
            for( town of towns){
                let tr = $('<tr>');
                displayTownInTable(tr, town, countryId);
                tr.appendTo(table);
            }
            $('#formShowTowns').append(table);
            $('#formShowTowns').append($("<input type='text' name='townName'/>"));
            $('#formShowTowns').append($("<a href='#'>[Add Town]</a>").click(function(){
                createTown(countryId)
            }));

            function displayTownInTable(tr, town, countryId){
                let links = [];
                let deleteLink = $("<a href='#'>[Delete]</a>").click(function () {
                    deleteTown(town._id, countryId)
                });
                let editLink = $("<a href='#'>[Edit]</a>").click(function () {
                    loadTownForEdit(town)
                });
                links.push(deleteLink);
                links.push(' ');
                links.push(editLink);

                tr.append(
                    $("<td>").text(town.name),
                    $("<td>").append(links)
                )
            }

        }
    }


    loadCountriesClicked();

    function createContry() {
        let adCountry = {
            name: $('#countries input[name=countryName]').val()
        };
        if ($('#countries input[name=countryName]').val() != '') {
            $.ajax({
                method: "POST",
                url: serviceUrl + "/countries",
                headers: authHeaders,
                data: JSON.stringify(adCountry),
                contentType: "application/json",
                success: loadCountriesClicked,
                error: handleAjaxError
            });

        }
    }

    function createTown(countryID) {
        let adTown = {
            name: $('#formShowTowns input[name=townName]').val(),
            country: countryID
        };
        if ($('#formShowTowns input[name=townName]').val()!=''){
            $.ajax({
                method: "POST",
                url: serviceUrl + `/towns/?query={"country":"${countryID}"}`,
                headers: authHeaders,
                data: JSON.stringify(adTown),
                contentType: "application/json",
                success: function () {
                    showTowns(countryID)
                },
                error: handleAjaxError
            });
        }

    }
    function deleteTownsInCountry(countryID) {
        $.ajax({
            method: "DELETE",
            url: serviceUrl + `/towns/?query={"country":"${countryID}"}`,
            headers: authHeaders,
            success: function(){
                deleteCountry(countryID)
            },
            error: handleAjaxError
        });

        function deleteCountry(countryID) {
            $.ajax({
                method: "DELETE",
                url: serviceUrl + "/countries/"+countryID,
                headers: authHeaders,
                success: loadCountriesClicked,
                error: handleAjaxError
            });
        }
    }
    function deleteTown(townId, countryID) {
        $.ajax({
            method: "DELETE",
            url: serviceUrl + "/towns/"+townId,
            headers: authHeaders,
            success: function () {
                showTowns(countryID)
            },
            error: handleAjaxError
        });
    }

    function loadTownForEdit(town) {
        $('#formEditTown').empty();
        showView('editTown');
        $.ajax({
            method: "GET",
            url: serviceUrl + '/towns/'+town._id,
            headers: authHeaders,
            success: loadTownForEditSuccess,
            error: handleAjaxError
        });


        function loadTownForEditSuccess(data) {
            $('#formEditTown').append($('<input type="text" name="townName"/>').val(data.name));

            console.dir( $('#formEditAd input[name=townName]').val())
            $('#formEditTown').append($('<button id="submitTown">Edit</button>').click(function () {
                editTown(data)}));
        }
    }

    function editTown(data) {
        let adData = {
            name: $('#formEditAd input[name=townName]').val(),
            country: data.country
        }
        $.ajax({
            method: "PUT",
            url: serviceUrl + '/towns/'+ data._id,
            headers: authHeaders,
            data: JSON.stringify(adData),
            contentType: "application/json",
            success: function(){
                showTowns(data.country)
            },
            error: handleAjaxError
        });

    }

    function handleAjaxError(response) {
        let errorMsg = JSON.stringify(response);
        if (response.readyState === 0)
            errorMsg = "Cannot connect due to network error.";
        if (response.responseJSON &&
            response.responseJSON.description)
            errorMsg = response.responseJSON.description;
        showError(errorMsg);
    }

    function showError(errorMsg) {
        $('#errorBox').text("Error: " + errorMsg);
        $('#errorBox').show();
    }
}