/**
 *  Please read the terms of the CLUF license attached to this module(cf "licences" folder)
 *
 *  @author    Línea Gráfica E.C.E. S.L.
 *  @copyright Lineagrafica.es - Línea Gráfica E.C.E. S.L. all rights reserved.
 *  @license   https://www.lineagrafica.es/licenses/license_en.pdf https://www.lineagrafica.es/licenses/license_es.pdf https://www.lineagrafica.es/licenses/license_fr.pdf
 */

(function ($) {
    $.fn.extend({
        lgslider: function (params) {
            // Atributos principales
            let slider = $(this);
            let wrapper = $('<div></div>');
            let clonedWrapper;
            let inAnimation = false;

            // Llamada a funciones inicializadoras
            init();
            generateWrapper();
            generateSlides();
            generateNavigation();
            //autoAnimate();

            // Inicializa el plugin
            function init() {
                params.numItems = $('.slide', slider).size();
                params.sliderWidth = slider.width();
                params.itemWidth = parseInt(params.sliderWidth / params.displayItems);
                params.wrapperWidth = params.itemWidth * params.numItems;
            }

            // Genera el contenedor de sliders
            function generateWrapper() {
                wrapper.addClass('lg-wrapper');
                wrapper.css('width', params.wrapperWidth + 'px');
                slider.prepend(wrapper);
            }

            // Inicializa cada slide
            function generateSlides() {
                $('.slide', slider).each(function () {
                    wrapper.append($(this));
                    $(this).css('width', params.itemWidth + 'px');
                });
                clonedWrapper = wrapper.clone().css('display', 'none').css('left', params.sliderWidth + 'px');
                slider.append(clonedWrapper);
                slider.css('height', (wrapper.outerHeight() + 100) + 'px');
            }

            // Genera los botones de navegacion
            function generateNavigation() {
                slider.append(
                    $('<div></div>')
                        .addClass('lg-button-container')
                        .addClass('pagination')
                        .append(
                            $('<span></span>')
                                .addClass('icon-previous')
                                .addClass('page-list')
                                .append(
                                    $('<i></i>')
                                        .addClass('material-icons')
                                        .html('&#xE5CB;')
                                )
                        )
                        .append(
                            $('<span></span>')
                                .addClass('icon-next')
                                .addClass('page-list')
                                .append($('<i></i>')
                                    .addClass('material-icons')
                                    .html('&#xE5CC;')
                                )
                        )
                );

                // Click event next
                $(document).on('click', '.icon-next', function () {
                    goTo('next');
                });

                // Click event previous
                $(document).on('click', '.icon-previous', function () {
                    goTo('previous');
                });
            }

            // Permite el desplazamiento
            function goTo(direction) {
                console.log('function goTo: '+direction);
                if(!inAnimation) {
                    let step = params.step * params.itemWidth;
                    let leftW1 = parseInt(wrapper.css('right')) + ((direction !== 'previous') ? -step : step);
                    let leftW2 = parseInt(clonedWrapper.css('left')) + ((direction !== 'previous') ? -step : step);
                    let w1Offset = leftW1 + params.wrapperWidth;
                    let w2Offset = leftW2 + params.wrapperWidth;

                    if(direction !== 'previous') {
                        // TODO: Se le suma 3 porque el calculo no es exacto (tiene una desviacion de 3px)
                        if((w1Offset + 3) === params.sliderWidth) {
                            leftW2 = params.sliderWidth - 3;
                            clonedWrapper.css('display', 'none');
                            clonedWrapper.css('left', leftW2 + 'px');
                            clonedWrapper.css('display', 'block');
                        }
                        if((w2Offset + 3) === params.sliderWidth) {
                            leftW1 = params.sliderWidth - 3;
                            wrapper.css('display', 'none');
                            wrapper.css('left', leftW1 + 'px');
                            wrapper.css('display', 'block');
                        }
                    } else {
                        if(leftW1 === 0) {
                            leftW2 = -params.wrapperWidth;
                            clonedWrapper.css('display', 'none');
                            clonedWrapper.css('left', leftW2 + 'px');
                            clonedWrapper.css('display', 'block');
                        }
                        if(leftW2 === 0) {
                            leftW1 = -params.wrapperWidth;
                            wrapper.css('display', 'none');
                            wrapper.css('left', leftW1 + 'px');
                            wrapper.css('display', 'block');
                        }
                    }

                    inAnimation = true;

                    wrapper.animate({
                        'left': leftW1
                    }, params.transition, function () {
                        inAnimation = false;
                    });

                    clonedWrapper.animate({
                        'left': leftW2
                    }, params.transition, function () {
                        inAnimation = false;
                    });
                }
            }

            /*function autoAnimate() {
                if(params.autoplay === true) {
                    setInterval(
                        function() {
                            goTo('next');
                        },
                        params.delay
                    );
                }
            }*/
        }
    });
}(jQuery));