$(document).ready(function () {

    var selectedLangs = [];
    var selectedCountries = [];
    var selectedEditCountry = '';
    var $languagesSelect = $('.js-languages-select');
    var $countriesSelect = $('.js-countries-select');
    var $languagesContainer = $('.js-languages-container');
    var $countriesContainer = $('.js-countries-container');

    var langVariables = {
        'up' : '#LANGUAGE_CODE_UP#',
        'code' : '#LANGUAGE_CODE#',
        'name' : '#LANGUAGE#'
    };

    var countryVariables = {
        'up' : '#COUNTRY_CODE_UP#',
        'code' : '#COUNTRY_CODE#',
        'name' : '#COUNTRY#',
        //этот плейсхолдер использовался для вставки картинки таба
        //был убран, т.к. тег img с плесйхолдером в src делал лишний запрос на эту же страницу
        //и снова грузил весь контент
        //'image' : '#COUNTRY_IMAGE#'
    };

    // Нажатие кнопки добавления вкладки страны
    $(document).on('click', '.js-add-country', function (el, ev) {
        selectedCountries = $countriesSelect.val();
    });

    // Нажатие кнопки добавления вкладки языка
    $(document).on('click', '.js-add-language', function (el, ev) {
        selectedLangs = $languagesSelect.val();
    });

    // Добавление вкладки языка
    $(document).on('click', '.js-apply-languages', function (el, ev) {
        doApply($languagesContainer, $languagesSelect, selectedLangs, LANGUAGES, langVariables);
    });

    // Добавление вкладки языка
    $(document).on('click', '.js-apply-countries', function (el, ev) {
        doApply($countriesContainer, $countriesSelect, selectedCountries, COUNTRIES, countryVariables);
    });

    // Отменить изменения добавления или удаления языка
    $(document).on('click', '.js-discard-languages', function (el, ev) {
        discardTabs($languagesSelect, selectedLangs);
    });

    // Отменить изменения добавления или удаления страны
    $(document).on('click', '.js-discard-countries', function (el, ev) {
        discardTabs($countriesSelect, selectedCountries);
    });

    // Отменить изменения по клику мимо модалки
    $(document).on('click', '#add-language-modal', function (el, ev) {
        var $target = $(el.target);
        var clickedOutside = $target[0].id === 'add-language-modal';

        if (clickedOutside) {
            discardTabs($languagesSelect, selectedLangs);
        }
    });

    // Отменить изменения по клику мимо модалки
    $(document).on('click', '#add-country-modal', function (el, ev) {
        var $target = $(el.target);

        var clickedOutside = $target[0].id === 'add-country-modal';

        if (clickedOutside) {
            discardTabs($countriesSelect, selectedCountries);
        }
    });

    // подготовка модальной формы редактирования
    $(document).on('click', '.js-edit-country', function (el, ev) {
        selectedCountries = $countriesSelect.val();
        for (i in selectedCountries) {
            var countryTab = '.js-tab-' + selectedCountries[i];
            if ($(countryTab).hasClass('active')) {
                selectedEditCountry = selectedCountries[i];
                initValueForEditCountry(selectedCountries[i]);
            }
        }

        $countriesSelect.val(selectedCountries);
        $countriesSelect.trigger("chosen:updated");
    });

    // редактирование таба
    $(document).on('click', '.js-apply-edit-countries', function (el, ev) {
        var newSelectedEditCountry = $(".js-edit-countries-select").chosen().val();
        if (selectedEditCountry != newSelectedEditCountry) {
            console.log(selectedEditCountry, newSelectedEditCountry);
            editTab(selectedEditCountry, newSelectedEditCountry, COUNTRIES)
        }
    });

    // отмена добавления таба

    function editTab(editCountry, newCountry, codes) {  // COUNTRIES - codes
        var code = codes[newCountry];
        console.log(code.image);
        var tabId = 'tab-' + editCountry;

        var $tab = $('.js-tab-' + editCountry);
        var $tabBody = $('js-tab-body-' + editCountry);
        $tab.find('.js-tab-image').attr('src', code.image);

        $tab.removeClass('js-tab-' + editCountry).addClass('js-tab-' + newCountry).show();
        $tab.find('.js-tab-name').attr('href', '#' + tabId);

        $tabBody.removeClass('js-tab-body-' + editCountry).addClass('js-tab-body-' + newCountry).show();
        $tabBody.attr('id', tabId);

    }

    function doApply($container, $select, selected, tabCodes, tabVariables) {
        var newSelected = $select.val();
        var removed = [];
        removed = selected.filter(x => newSelected.indexOf(x) < 0 );

        // Оповещаем, что удалены языки, которые уже были сохранены ранее
        if (removed.length) {
            swal({
                    title: "Внимание",
                    text: "Вы собираетесь удалить: " + removed.join(', ') + '. Если вы продолжите, то все данные для этих элементов будут удалены безвозвратно. Продолжить?',
                    confirmButtonText: "Да, удалить",
                    showCancelButton: true,
                    cancelButtonText: "Нет, я подумаю",
                    closeOnConfirm: true,
                    closeOnCancel: true
                },
                function (isConfirm) {
                    if (isConfirm) {
                        applyTabs($container, $select, selected, tabCodes, tabVariables);
                    }
                    return false;
                });
        } else {
            applyTabs($container, $select, selected, tabCodes, tabVariables);
        }
    }

    // Применяем новые языки (добавляем или удаляем или то и другое)
    function applyTabs($container, $select, selected, codes, variablesArr) {
        var newSelected = $select.val(),
            $tabTemplate = $container.find('.js-tab-template').first(),
            $tabBodyTemplate = $container.find('.js-tab-body-template').first(),
            newTabs = [];

        // Удаляем
        $.each(selected, function(i, el){
            console.log(el);
            if (in_array(el, newSelected)) {
                return;
            }

            $('.js-tab-' + el).remove();
            $('.js-tab-body-' + el).remove();
        });

        // Добавляем
        $.each(newSelected, function(i, el){
            if (in_array(el, selected)) {
                return;
            }
            if ($('.js-tab-' + el).length) {
                return;
            }

            var code = codes[el];
            var variablesUp = variablesArr.up;
            var variablesCode = variablesArr.code;
            var variablesName = variablesArr.name;
            var variables = [];
            variables[variablesUp] = code.code.toUpperCase();
            variables[variablesCode] = code.code;
            variables[variablesName] = code.name;

            var tabId = 'tab-' + el;

            var $tab = $tabTemplate.clone();
            var $tabBody = $tabBodyTemplate.clone();

            $tab.html(template_replace($tab.html(), variables));
            //устанавливаеми картинку для вкладки при добавлении
            $tab.find('.js-tab-image').attr('src', code.image);
            $tabBody.html(template_replace($tabBody.html(), variables));

            $tab.removeClass('js-tab-template').addClass('js-tab-' + el).show();
            $tab.find('.js-tab-name').attr('href', '#' + tabId);

            $tabBody.removeClass('js-tab-body-template').addClass('js-tab-body-' + el).show();
            $tabBody.attr('id', tabId);

            $tabBody.find('.js-editable-template').each(function (index, element) {
                $(this).removeClass('js-editable-template');
                $(this).addClass('js-editable');
            });

            //добавим дата аттрибут для кнопки добавить в галереях
            $tabBody.find('.js-upload-from-languages').attr('data-upload-language', el);
            $tabBody.find('.js-replace-from-languages').attr('data-upload-language', el);
            //задаем класс для селекта с выбором языков в галереях
            $tabBody.find('.js-choose-slide-language-').removeClass('js-choose-slide-language-').addClass('js-choose-slide-language-' + el);
            //задаем языковую метку контейнера со слайдами
            $tabBody.find('.js-slide-language-container-').removeClass('js-slide-language-container-').addClass('js-slide-language-container-' + el);
            // добавляем селектам текущий язык
            $tabBody.find('.js-select-language-upload').each(function (index, select) {
                $(select).attr('data-upload-language', el);
                var entityCode = $(select).attr('data-entity-code');
                $(select).addClass('js-choose-slide-language-'+el+'-'+entityCode);
            });
            $tabBody.find('.js-slide-container').each(function (index, container) {
                var tab = $(container).find('.js-sortable');
                var newContainerSlideCode = $(tab).attr('data-entity-code');
                $(tab).addClass('js-slide-language-container-'+el+'-'+newContainerSlideCode);
            });

            $tabTemplate.before($tab);
            $tabBodyTemplate.before($tabBody);

            newTabs.push($tabBody);
        });

        // Переинициализируем табы
        // $(".nav-tabs").tabs();

        setTimeout(function () {
            initEditors($container);
            initCustomCheckboxes($container);
            checkBox();
            initDatepickers();
            hideButtonsUpload();
            if (newTabs.length) {
                for (var i in newTabs) {
                    $(newTabs[i]).find('.js-select-language-upload');
                    initCustomSelects(newTabs[i]);
                }
            }
        }, 500);

        $('.jsLanguagesModal .jsModalClose').click();
    }

    // Возвращаемся к предыдущему состоянию
    function discardTabs($select, selected) {

        $select.val(selected);
        $select.trigger("chosen:updated");

        $('.jsLanguagesModal .jsModalClose').click();
    }

    //Быстрое удаление языковой вкладки по клику на крестик
    $('body').on('click', '.js-delete-language',function (e) {

        e.preventDefault();
        var target = e.currentTarget;
        var language = $(target).data('language');

        //удаление вкладки
        var $tab = $(target).closest('.tab-pane');
        $tab.remove();

        /**
         * удаление таба
         * делаем проверку что это был именно активный таб
         * и выбираем соседний таб, добавляем ему класс active чтобы он отображался на странице
         */
        var tabClass = '.js-tab-'+language;
        if($(tabClass).hasClass('active')) {
            $(tabClass).remove();
            setActive($('.js-languages-container'));
            reInitsAfterDeleteLang(language);
        }
    });

    //Быстрое удаление вкладки страны по клику на крестик
    $('body').on('click', '.js-delete-country',function (e) {

        e.preventDefault();
        var target = e.currentTarget;
        var country = $(target).data('country');

        //удаление вкладки
        var $tab = $(target).closest('.tab-pane');
        $tab.remove();

        /**
         * удаление таба
         * делаем проверку что это был именно активный таб
         * и выбираем соседний таб, добавляем ему класс active чтобы он отображался на странице
         */
        var tabClass = '.js-tab-country-'+country;
        if($(tabClass).hasClass('active')) {
            $(tabClass).remove();
            setActive($('.js-countries-container'));
            reInitsAfterDeleteCountry(country);
        }
    });

    /**
     * Делаем активной другую вкладку взамен удаленной
     * @param $container
     */
    function setActive($container) {
        $container.find('li').first().addClass('active');
        $container.find('div .tab-pane').first().addClass('active');
    }

    /**
     * Переинициализация необходимых элементов после удаления языковой вкладки
     * @param language
     */
    function reInitsAfterDeleteLang(language) {
        if(typeof(language) == 'undefined') {
            return;
        }
        /**
         * Переинициализация модалки для добавленя языков убираем
         * @type {jQuery|HTMLElement}
         */
        var $select = $('.js-languages-select');
        $select.find('option').each(function (index, element) {
            if($(element).attr('value') == language) {
                $(element).prop('selected', false);
                $(element).removeClass('js-default');
            }
        });
        $select.trigger('change');
        initCustomSelects($('.jsLanguagesModal#add-language-modal '));
    }

    function reInitsAfterDeleteCountry(country) {
        if(typeof(country) == 'undefined') {
            return;
        }
        /**
         * Переинициализация модалки для добавленя языков убираем
         * @type {jQuery|HTMLElement}
         */
        var $select = $('.js-countries-select');
        $select.find('option').each(function (index, element) {
            if($(element).attr('value') == 'country-' + country) {
                $(element).prop('selected', false);
                $(element).removeClass('js-default');
            }
        });
        $select.trigger('change');
        initCustomSelects($('.jsLanguagesModal#add-country-modal '));
    }

    // в модальной форме редактирования страны устанавливаем значение
    function initValueForEditCountry(country) {
        var $select = $('.js-edit-countries-select');
        $select.find('option').each(function (index, element) {
            if($(element).attr('value') == country) {
                $(element).prop('selected', true);
                $(element).addClass('js-default');
            } else {
                $(element).prop('selected', false);
                $(element).removeClass('js-default');
            }
        });
        $select.trigger('chosen:updated');
        initCustomSelects($('.jsLanguagesModal#edit-country-modal'));
    }
});