/**
 * TNT OFFICIAL MODULE FOR PRESTASHOP
 *
 * @author    GFI Informatique <www.gfi.fr>
 * @copyright 2016 GFI Informatique, 2016 TNT
 * @license   https://opensource.org/licenses/MIT MIT License
 */

$(document).ready(function () {

    // Create the FancyBox.
    createFancyBox();

    var boolIsCityValid = false;

    // When a city is selected.
    $("#validateCity").on('click', function () {

        var objJqXHR = $.ajax({
            "url": window.TNTOfficiel.link.front.module.updateAddressDelivery,
            "method": 'POST',
            "data": {
                "city": $("#helper_city").val()
            },
            "async": false
        });

        objJqXHR
        .done(function (mxdData, strTextStatus, objJqXHR) {
        })
        .fail(function (objJqXHR, strTextStatus, strErrorThrown) {
            // console.error( objJqXHR.status + ' ' + objJqXHR.statusText );
        })
        .always(function () {
            // Close the FancyBox.
            $.fancybox.close();
            boolIsCityValid = true;
        });
    });

    $("[name='processAddress']").on('click', function (objEvent) {
        if (!boolIsCityValid) {
            objEvent.preventDefault();

            var objJqXHR = $.ajax({
                "url": window.TNTOfficiel.link.front.module.getAddressCities,
                "method": 'POST',
                "async": false
            });

            objJqXHR
            .done(function (mxdData, strTextStatus, objJqXHR) {
                var response = JSON.parse(mxdData);
                displayFancyBox(response.cities, response.postcode)
            })
            .fail(function (objJqXHR, strTextStatus, strErrorThrown) {
                // console.error( objJqXHR.status + ' ' + objJqXHR.statusText );
            })
            .always(function () {});
        }
    });
});

/**
 * insert the fancy box html into the page
 */
function createFancyBox() {
    $("#page").append('\
<a id="fancybox_city_helper" href="#city_helper" hidden="hidden"></a>\
<div style="display:none">\
    <div id="city_helper">\
        <h1 class="page-subheading">S&eacute;lectionnez votre ville</h1>\
        <div class="form-group">\
            <label for="postcode">Code postal</label>\
            <input class="form-control" type="text" id="helper_postcode" name="helper_postcode" value="" disabled="disabled" />\
        </div>\
        <div class="form-group">\
            <label for="helper_city">Ville</label>\
            <select id="helper_city" name="helper_city"></select>\
        </div>\
        <p class="submit2">\
            <button id="validateCity" class="btn btn-default button button-small">\
                <span>Valider<i class="icon-chevron-right right"></i></span>\
            </button>\
        </p>\
    </div>\
</div>'
    );
}

/**
 * Display the fancybox
 */
function displayFancyBox(arrArgCities, strArgPostCode) {
    // fancybox configuration
    $("a#fancybox_city_helper").fancybox({
        "transitionIn": 'elastic',
        "transitionOut": 'elastic',
        "type": 'inline',
        "speedIn": 600,
        "speedOut": 200,
        "overlayShow": false,
        "autoDimensions": true,
        "helpers": {
            overlay: {closeClick: false}
        }
    });

    // Generate the options to be put in the city select field.
    var strHTMLOptions = "";
    $.each(arrArgCities, function (index, city) {
        strHTMLOptions += "<option value='" + city + "'>" + city + "</option>";
    });

    $("#helper_city").html(strHTMLOptions);
    $("#helper_city").addClass("form-control");
    $("#helper_postcode").val(strArgPostCode);
    $("a#fancybox_city_helper").trigger("click");
}