$(function () {

    /**
     * LOCALITY LOOKUPS
     */

    $('[name*=country]').on('change', function () {
        var prefix = $(this).attr('name').substring(0, $(this).attr('name').length - 'country'.length);
        updateLocalityChosen($(this).val(), true, prefix);
    });

    /**
     * ZIPCODE LOOKUPS
     */

    $('[name*=postal_code]').on('keyup', function () {
		if ($(this).val().length < 5) return;
        var prefix = $(this).attr('name').substring(0, $(this).attr('name').length - 'postal_code'.length);
        $.getJSON('/api/zip_info/' + $(this).val() + '/', function (data) {

            if (data.locality_id) {
                $('[name=' + prefix + 'locality] option[value=' + data.locality_id + ']').prop('selected', true).siblings().prop('selected', false);
                $('[name=' + prefix + 'locality]').trigger("change");
                $('[name=' + prefix + 'locality]').trigger("chosen:updated");
            }
        });
    }).on('change', function () {
        $(this).trigger('keyup');
	});

	// CITY LOOKUP
	updateCityChosen();

});


function updateLocalityChosen(country_id, async, prefix) {
    var locality_field = prefix == null || prefix == '' ? $('[name*=locality]') : $('[name=' + prefix + 'locality]');
    locality_field.prop('disabled', true);
    $.ajax({
        type: 'GET',
        url: '/api/localities/' + country_id + '/',
        dataType: 'json',
        async: async,
        success: function (data) {
            locality_field.empty();
            $.each(data, function (i, e) {
                locality_field.append('<option value="' + e[0] + '">' + e[1] + '</option>');
            });
            // Check for autocomplete data to autoselect the locality chosen
            if (typeof selected_address !== 'undefined' && locality_field.find('option:contains("' + selected_address.locality + '")').length > 0) {
                locality_field.find('option:contains("' + selected_address.locality + '")').attr('selected', true);
            }
            // Update inputs if needed
            if (data.length) locality_field.prop('disabled', false);
            else locality_field.append('<option value="">No options</option>');
            locality_field.trigger("change");
            locality_field.trigger("chosen:updated");
        }
    });
}

// For city dropdown on checkout SHIPPING
$(document).on("change", "#id_locality", function(e){
	let value = $(this).val();
	if(value){
		updateCityChosen(value);
	}
});


// Function for fetching data to endpoint
function updateCityChosen(value=0){
	value = value ? value : $("#id_locality").val();
	if(value){
		$.ajax({
			method: "GET",
			url:"/api/city-data/" + value ,
			dataType: "json",
			success: function(data){
				let city_field = $("[name=city]");
				let chosen_div = $(".city .chosen-container");
				let selectElement = document.createElement("select");

				if(data.length !== 0){

					if($("[name=city]").is("input")){
						// copy the existing input element's attributes to the new select element
						for (var i = 0; i < city_field[0].attributes.length; ++ i) {
							if (i === 0 || 2) {
								let attribute = city_field[0].attributes[i];
								// type and value don't apply, so skip them
								// ** you might also want to skip style, or others -- modify as needed **
								if (attribute.name != 'type' && attribute.name != 'value') {
									selectElement.setAttribute(attribute.name, attribute.value);
								}
							}
						}

						// create an empty option for Select an Option
						selectElement.appendChild(createOption());

						// create option base on response data
						$.each(data, function(i, e){
							selectElement.appendChild(createOption(e.name));
						});

						// Previous state of city field.
						let previous_field = city_field;
						city_field.replaceWith(selectElement);

						if(previous_field.is("input")) {
							$("[name=city]").chosen();
							if(previous_field.val()){
								updateCity(previous_field.val());
							}
						}
					}

				} else {
					if(city_field.is("select")) {
						chosen_div.remove();
						city_field.replaceWith('<input id="id_city" maxlength="70" name="city" type="text">');
					}
				}
			}
		});
	}
}

// Function for creating select options
function createOption(city_name="") {
	let optionElement = document.createElement("option");
	optionElement.appendChild(document.createTextNode(city_name));
	optionElement.setAttribute('value', city_name);
	return optionElement
}

// Function for updating city chosen
function updateCity(value){
	$('[name=city] option[value="' + value + '"]').prop('selected', true).siblings().prop('selected', false);
	$('[name=city]').trigger("change");
	$('[name=city]').trigger("chosen:updated");
}