'use strict';

function sendForm () {
    var $form = $('#mailing_settings_form');
    $.ajax({
        url: $form.attr('action'),
        type: $form.attr('method'),
        data: $form.serializeArray(),
        success: function(response){
            console.log(response);
        }
    })
}


// Выбор тем
(function () {
    var $themes_modal = $('.popup-window.themes'),
        $autocomplete = $('#autocomplete_themes', $themes_modal),
        $autocomplete_results = $('#autocomplete_themes_results', $themes_modal),
        $themes_select = $('#id_th'),
        $tags_select = $('#id_tg'),
        $selected_themes = $('.selected_themes'),
        timer,
        tags_ids = [],

        renderSublistItem = function (data) {
            return '<li>' +
                        '<label>' +
                            '<input type="checkbox" class="hidden_checkbox" name="' + data.name + '" value="' + data.id + '" />' +

                            '<span class="custom_checkbox"></span>' +
                            '<span class="label">' + data.text + '</span>' +
                        '</label>' +
                    '</li>';
        },

        renderSublist = function (url, $sub_list) {
            var $loader = $themes_modal.find('.wait-ajax').show();

            $.getJSON(url, function (data, status) {
                if (status == 'success'){
                    $.each(data, function (i) {
                        var $sub_item = $(renderSublistItem( data[i] ));

                        if (tags_ids.indexOf( data[i]['id']) >= 0){
                            $sub_item.find('input').prop('checked', true);
                        }

                        $sub_list
                            .addClass('has_items')
                            .append($sub_item);
                    });
                    $loader.hide();
                }
            });
        },

        renderSelectedThemes = function (obj) {
            return '<li>' +
                        '<input type="hidden" name="' + obj['name'] + '" value="' + obj['id'] + '">' +
                        obj['text'] +
                        '<a href="#">&times;</a>' +
                    '</li>'
        },

        getAutocompleteResults = function () {
            var term = $autocomplete.val();
            if ($.trim(term).length >= 3){

                $.get(
                    $autocomplete.data('url'),
                    {
                        form: $autocomplete.data('form'),
                        term: term
                    },
                    function (response) {

                        var results = '';
                        response.forEach(function (obj) {
                            results += '<li data-type="' + obj.name + '" data-id="' + obj.id + '" data-text="' + obj.text + '">' + obj.text + ' <span>(' + obj.cat + ')</span></li>'
                        });

                        $autocomplete_results
                            .html(results)
                            .show();
                    }
                )
            }
        },

        deleteSelectedItem = function (obj) {
            $selected_themes
                .find('input[name="' + obj['name'] + '"][value="' + obj['id'] + '"]')
                .parents('li')
                .remove();

            $themes_modal
                .find('.selected')
                .find('input[name="' + obj['name'] + '"][value="' + obj['id'] + '"]')
                .parents('li')
                .remove();

            $('#id_' + obj['name']).find('option[value="' + obj['id'] + '"]').remove();
        };


    // Генерируем выбранные темы при загрузке страницы
    $themes_select.find('option').each(function () {
        $themes_modal.find('input[name="th"][value="' + $(this).val() + '"]').prop('checked', true);

        var item = {
            id: $(this).val(),
            name: 'th',
            text: $(this).text()
        },
        theme_item = renderSelectedThemes(item);
        $selected_themes.append(theme_item);

        $themes_modal.find('.selected_values').show();
    });


    // Генерируем выбранные теги при загрузке страницы
    $tags_select.find('option').each(function () {
        tags_ids.push($(this).val() * 1);

        var item = {
            id: $(this).val(),
            name: 'tg',
            text: $(this).text()
        },
            tag_item = renderSelectedThemes(item);

        $selected_themes.append(tag_item);
        $themes_modal.find('.selected_values').show();
    });


    // открываем список тегов в теме
    $themes_modal.on('click', '.trigger', function (e) {
        e.preventDefault();

        var $link = $(this),
            $sub_list = $link.next('.sub');

        // если теги подгружены, то открываем(закрываем) список
        // если нет, то подгружаем аяксом теги
        if ($sub_list.hasClass('has_items')){
            $sub_list.slideToggle(100);
        } else {
            renderSublist($link.attr('href'), $sub_list);
        }
    });


    $themes_modal.on('change', 'input[type="checkbox"]', function (e) {
        e.preventDefault();
        var $checkbox = $(this),
            item = {
                id: $checkbox.val(),
                name: $checkbox.attr('name'),
                text: $checkbox.parent().find('.label').text()
            };

        if($checkbox.is(':checked')){
            var selected_item = renderSelectedThemes(item);

            $selected_themes.append(selected_item);
            $themes_modal.find('.selected_values').show();
        } else {
            deleteSelectedItem(item);
        }

        if ($themes_modal.find('.selected_values li').length == 0) {
            $themes_modal.find('.selected_values').hide();
        }

        sendForm();
    });


     // Input автокомплита
    $autocomplete.on('keyup', function () {
        $autocomplete_results.html('');
        clearTimeout(timer);
        timer = setTimeout(getAutocompleteResults, 500);
    });


    // Выбор из автокомплита
    $autocomplete_results.on('click', 'li', function () {
        var $this = $(this),
            item = {
                id: $this.data('id'),
                name: $this.data('type'),
                text: $this.data('text')
            };

        // Проверяем или такой пункт уже выбран
        if ($selected_themes.find('[value=' + item['id'] + ']').length == 0){
            var selected_item = renderSelectedThemes(item);
            $selected_themes.append(selected_item);

            $themes_modal.find('.selected_values').show();

            $('.modal_checkboxes').find('input[name="' + item['name'] + '"][value="' + item['id'] + '"]').prop('checked', true);

            sendForm();

            if (item['name'] == 'tg'){
                if (tags_ids.indexOf(item['id'] * 1) >= 0){
                    tags_ids.splice(tags_ids.indexOf(item['id'] * 1), 1)
                } else {
                    tags_ids.push(item['id'] * 1);
                }
            }
        }

        $autocomplete_results
            .html('')
            .hide();
        $autocomplete.val('');
    });

    // Удаление выбранной темы
    $selected_themes.on('click', 'a', function (event) {
        event.preventDefault();

        var $input = $(this).siblings('input');

        var item = {
            id: $input.val(),
            name: $input.attr('name')
        };

        if (item['name'] == 'tg'){
            if (tags_ids.indexOf(item['id'] * 1) >= 0){
                tags_ids.splice(tags_ids.indexOf(item['id'] * 1), 1)
            } else {
                tags_ids.push(item['id'] * 1);
            }
        }

        deleteSelectedItem(item);
        $('.modal_checkboxes').find('input[name="' + item['name'] + '"][value="' + item['id'] + '"]').prop('checked', false);

        $(this).parent('li').remove();

        if ($themes_modal.find('.selected_values li').length == 0) {
            $themes_modal.find('.selected_values').hide();
        }

        sendForm();
    });

    $('body').on('click', function (e) {
        if ($autocomplete_results.is(':visible') && $(e.target).parents('.autocomplete_block').length == 0){
            $autocomplete_results
                .html('')
                .hide();
        }
    });

})();


// Выбор городов
(function () {
    var $cities_modal = $('.popup-window.r_cities'),
        $selected_cities = $('#selected_cities'),
        $cities_select = $('#id_r_cities'),
        selected_cities = {},

        renderSelectedCountry = function (id, text) {
            return '<li>' +
                        '<input type="hidden" name="r_cities" value="' + id + '">' +
                        text +
                        '<a href="#">&times;</a>' +
                    '</li>'
        },

        renderSelectedCities = function () {
            $selected_cities.html('');

            for (var city_id in selected_cities) {
                var $city = $(renderSelectedCountry(city_id, selected_cities[city_id]));
                $selected_cities.append($city);
            }

            sendForm();
        };

    // Записываем данные в user_chice при инициализации
    $cities_select.find('option').each(function () {
        $cities_modal.find('input[name="r_cities"][value="' + $(this).val() + '"]').prop('checked', true);

        selected_cities[$(this).val()] = $(this).text();

        var $city = $(renderSelectedCountry($(this).val(), $(this).text()));
        $selected_cities.append($city);
    });

    $cities_modal.on('change', 'input[type="checkbox"]', function (e) {
        e.preventDefault();
        var $checkbox = $(this);

        // записываем(удаляем) в объект selected_cities отмеченные темы(теги)
        if($checkbox.is(':checked')){
            selected_cities[$checkbox.val()] = $checkbox.parent().find('.label').text();
        } else {
            delete selected_cities[$checkbox.val()];
            $('#id_' + $checkbox.attr('name')).find('option[value="' + $checkbox.val() + '"]').remove();
        }

        renderSelectedCities();
    });


    // Удаление выбранного тега
    $selected_cities.on('click', 'a', function (event) {
        event.preventDefault();

        var $input = $(this).siblings('input');

        delete selected_cities[$input.val()];
        $('.modal_checkboxes').find('input[name="' + $input.attr('name') + '"][value="' + $input.val() + '"]').prop('checked', false);
        $('#id_' + $input.attr('name')).find('option[value="' + $input.val() + '"]').remove();

        $(this).parent('li').remove();
        sendForm();
    });
})();


// Выбор стран
(function () {
    var $countries_modal = $('.popup-window.countries'),
        $areas_select = $('#id_area'),
        $co_select = $('#id_co'),
        $selected_areas = $('#selected_areas'),
        $selected_co = $('#selected_countries'),
        user_countries = {
            area: {},
            co: {}
        },

        renderSublistItem = function (data) {
            return '<li>' +
                        '<label>' +
                            '<input type="checkbox" class="hidden_checkbox" name="' + data.name + '" value="' + data.id + '" />' +
                            '<span class="custom_checkbox"></span>' +
                            '<span class="label">' + data.text + '</span>' +
                        '</label>' +
                    '</li>';
        },

        renderSublist = function (url, $sub_list) {
            var $loader = $countries_modal.find('.wait-ajax').show();

            $.getJSON(url, function (data, status) {
                if (status == 'success'){
                    $.each(data, function (i) {
                        var $sub_item = $(renderSublistItem( data[i] ));

                        if (data[i]['id'] in user_countries['co']){
                            $sub_item.find('input').prop('checked', true);
                        }
                        $sub_list
                            .addClass('has_items')
                            .append($sub_item);

                    });

                    $loader.hide();
                }
            });
        },

        renderSelectedCountry = function (id, name, text) {
            return '<li>' +
                        '<input type="hidden" name="' + name + '" value="' + id + '">' +
                        text +
                        '<a href="#">&times;</a>' +
                    '</li>'
        },

        renderSelectedCountries = function () {
            $selected_co.html('');
            $selected_areas.html('');


            for (var area_id in user_countries['area']) {
                var $area = $(renderSelectedCountry(area_id, 'area', user_countries['area'][area_id]));
                $selected_areas.append($area);
            }

            for (var co_id in user_countries['co']) {
                var $co = $(renderSelectedCountry(co_id, 'co', user_countries['co'][co_id]));
                $selected_co.append($co);
            }

            sendForm();
        },

        removeCheckbox = function (type, id) {
            delete user_countries[type][id];
            $('.modal_checkboxes').find('input[name="' + type + '"][value="' + id + '"]').prop('checked', false);
            $('#id_' + type).find('option[value="' + id + '"]').removeAttr('selected');
        };

    // Записываем данные в user_countries при инициализации
    $areas_select.find('option[selected]').each(function () {
        $countries_modal.find('input[name="area"][value="' + $(this).val() + '"]').prop('checked', true);

        user_countries['area'][$(this).val()] = $(this).text();

        var $area = $(renderSelectedCountry($(this).val(), 'area', $(this).text()));
        $selected_areas.append($area);
    });

    $co_select.find('option[selected]').each(function () {
        user_countries['co'][$(this).val()] = $(this).text();

        var $co = $(renderSelectedCountry($(this).val(), 'co', $(this).text()));
        $selected_co.append($co);
    });

    // открываем список тегов в теме
    $countries_modal.on('click', '.trigger', function (e) {
        e.preventDefault();

        var $link = $(this),
            $sub_list = $link.next('.sub');

        // если теги подгружены, то открываем(закрываем) список
        // если нет, то подгружаем аяксом теги
        if ($sub_list.hasClass('has_items')){
            $sub_list.slideToggle(100);
        } else {
            renderSublist($link.attr('href'), $sub_list);
        }
    });


    $countries_modal.on('change', 'input[type="checkbox"]', function (e) {
        e.preventDefault();
        var $checkbox = $(this);

        // записываем(удаляем) в объект user_choice отмеченные темы(теги)
        if($checkbox.is(':checked')){
            user_countries[$checkbox.attr('name')][$checkbox.val()] = $checkbox.parent().find('.label').text();
        } else {
            delete user_countries[$checkbox.attr('name')][$checkbox.val()];
            $('#id_' + $checkbox.attr('name')).find('option[value="' + $checkbox.val() + '"]').removeAttr('selected');
        }

        renderSelectedCountries();
    });


    // Удаление выбранного континента
    $selected_areas.on('click', 'a', function (event) {
        event.preventDefault();

        var $input = $(this).siblings('input');

        removeCheckbox($input.attr('name'), $input.val());

        $(this).parent('li').remove();
        sendForm();
    });


    // Удаление выбранной страны
    $selected_co.find('a').on('click', function (event) {
        event.preventDefault();

        var $input = $(this).siblings('input');

        removeCheckbox($input.attr('name'), $input.val());

        $(this).parent('li').remove();
        sendForm();
    });
})();



$(function () {
    $('.modal_trigger').fancybox({
        padding: 0
    });

    $('.scroll-container').mCustomScrollbar();


    if ($('#unsibscribed').length)
        $.fancybox.open({href: '#unsibscribed'});
});