// Global variables
let infoWindow, map, autocomplete, selectedItem = {};
const carrousel = '.owl-carousel-home';
const carrouselProducts = '.owl-carousel-products';
const mobileMenu = '#mobile-menu';
const nav = '.nav';
const navContainer = '.nav__container';
const navClass = 'nav--active';
const navNoScrollClass = 'nav--noscroll';
const askButton = '#lc-map-use';
const markerClose = '.map__close';
const homeCardSelector = 'options__side';
const cardSelector = 'products__card-side';

let activeNav = false;
// Stores Map
const mapId = 'lc-map';
const mapDialog = 'map__search-';
const mapDialogDiv = `.${mapDialog}result`;
const mapDialogActive = `${mapDialog}result--active`;
const mapMarkerIcon = 'https://mexico.littlecaesars.com//portals/0/Images/LittleCaesars/map-pin.png';
var userPosition = '';
var actualStore = '';
var directionsDisplay = '';
var directionsService = '';

$(window).on('load', () => {
    // Products hash
    if (window.location.hash) {
        $('html, body').animate({ scrollTop: $(window.location.hash).offset().top }, 'slow');
    }
});

// Resize
$(window).on('resize', () => {
    $(mobileMenu).prop('checked', false);
    $(nav).removeClass(navClass);
    $('body').removeClass(navNoScrollClass);
    $('.carrousel__image').removeClass('animated bounceInDown slideInDown slideInUp fadeInDown fadeInLeft fadeInRight bounceInUp');
});

$(document).ready(() => {
    // Carrousel
    const homeCarousel = $(carrousel).owlCarousel({
        nav: false,
        items: 1,
        loop: false,
        lazyLoad: true,
        autoplay: true,
        autoplayTimeout: 80000,
        autoplayHoverPause: true,
        onInitialize: function(){
            $(carrousel).removeClass('loading');
        }
    });
    $(carrousel).trigger("to.owl.carousel", [0, 1]);
    // Change carousel
    homeCarousel.on('changed.owl.carousel', ({ page }) => {

        if (window.innerWidth <= 1000) return 
        const { index } = page;
        $('.carrousel__image').removeClass('animated bounceInDown slideInDown slideInUp fadeInDown fadeInLeft fadeInRight bounceInUp');
        switch (index) {
            case 0:
                $('.carrousel__image_lc').addClass('animated fadeInLeft');
                $('.carrousel__image_title').addClass('animated slideInDown');
                $('.carrousel__image_info').addClass('animated slideInUp');
                break;
            /// Slide 0
            case 1:
                $('.carrousel__image_cu4tro_pizza').addClass('animated slideInDown');
                $('.carrousel__image_cu4tro_name').addClass('animated fadeInRight');
                $('.carrousel__image_cu4tro_promo').addClass('animated slideInUp');
                break;
            /// Slide 1
            case 2:
                $('.carrousel__image-0--lc').addClass('animated bounceInDown');
                $('.carrousel__image-0--title').addClass('animated slideInDown');
                $('.carrousel__image-0--subtitle').addClass('animated slideInDown');
                break;
            /// Slide 2
            case 3:
                $('.carrousel__image-2--title').addClass('animated fadeInLeft');
                $('.carrousel__image-2--subtitle').addClass('animated bounceInDown');
                $('.carrousel__image-2--pizza').addClass('animated fadeInRight');
                break;
            // Slide 3
        }
    });

    // Products carousel
    $(carrouselProducts).owlCarousel({
        nav: false,
        items: 1,
        loop: true
    });

    // Mobile navigations
    $(mobileMenu).change(function () {
        if ($(this).is(':checked')) {
            $(nav).addClass(navClass);
            activeNav = true;
        } else {
            $(nav).removeClass(navClass);
            $(nav).removeClass(navNoScrollClass);
            activeNav = false;
        }
    });

    // Reset height of menu if height is too large
    if ($(window).height() > $(navContainer).height()) {
        $(nav).height($(window).height());
    }

    // Mobile navigation prevent scroll
    $(window).on('scroll', () => {
        // const height = $(nav).height() - $(window).height();
        const height = $(navContainer).height() - $(window).height();
        if ($(window).scrollTop() > height && activeNav) {
            $(window).scrollTop(height);
        }
    });

    // Home card flip
    $(`.${homeCardSelector}`).click(function () {
        $(this).parent().find(`.${homeCardSelector}--front`).toggleClass(`${homeCardSelector}--front-active`);
        $(this).parent().find(`.${homeCardSelector}--back`).toggleClass(`${homeCardSelector}--back-active`);
    });

    // Products card flip
    $(`.${cardSelector}`).click(function (e) {
        e.preventDefault();
        $(this).parent().find(`.${cardSelector}--front`).toggleClass(`${cardSelector}--front-active`);
        $(this).parent().find(`.${cardSelector}--back`).toggleClass(`${cardSelector}--back-active`);
    });

    //Sucursales
    let sucursales = [];
    let cleanLocalities;
    let localities;
    let cleanSubLocalities;
    //$.getJSON('Portals/_default/skins/xcillion/js/sucursales5.json')
    $.getJSON('https://littlecaesarsapi.ktbo.mx/web/stores')
    .done(data => {
        sucursales = data;
        sucursales.sort();
    let statesArray =[];

    //clean states list of 'sucursales'
    sucursales.map(sucursal =>{
        if(statesArray.indexOf(sucursal.state) == -1){
            statesArray.push(sucursal.state);
        }
    });
    statesArray.sort();
    //Fill combobox states
    var html = '<option value="">SELECCIONE UN ESTADO</option>'; 
    for(var i=0; i < statesArray.length; i++){
        html += '<option value="'+ statesArray[i] +'">' + statesArray[i];
    }
    $('#search-city').html(html);
})
.fail(error => console.error(`Error loading places: ${error}`));

// Button ask for location on map
$(askButton).click(() => askForLocation());

// Ask for location event
function askForLocation(traceRoute) {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(({ coords }) => {
            const userPosition = {
                lat: coords.latitude,
                lng: coords.longitude
            };
            initMap(userPosition);
                const marker = new google.maps.Marker({ 'position': userPosition, map });
                directionsDisplay = new google.maps.DirectionsRenderer();
                directionsDisplay.setMap(map);
                marker.setMap(map);
                map.setCenter(new google.maps.LatLng(userPosition.lat, userPosition.lng));
                map.setZoom(15);
                setupMarksCluster(sucursales, false);
    });
    }
}

// Google Maps
function initMap(item) {
    _lat = parseFloat(item.lat);
    _lng = parseFloat(item.lng);
    if(!map){
        console.log('initMap');
        var centerMap = new google.maps.LatLng(_lat, _lng)
        directionsService = new google.maps.DirectionsService();
        directionsDisplay = new google.maps.DirectionsRenderer();
        map = new google.maps.Map(document.getElementById(mapId), {
            zoom: 12,
            center: centerMap,
            mapTypeControl: false,
            zoomControl: true,
            scaleControl: true,
            streetViewControl: true,
            rotateControl: true,
            fullscreenControl: false
        });
        infoWindow = new google.maps.InfoWindow({ map });
        directionsDisplay.setMap(map);
    }else{
        const marker = new google.maps.Marker({ 'position': userPosition, map });
        directionsDisplay = new google.maps.DirectionsRenderer();
        directionsDisplay.setMap(map);
        marker.setMap(map);
        map.setCenter(new google.maps.LatLng(_lat, _lng));
        map.setZoom(15);
    }
}

$(document).on('change','#search-city', function(){
    $('#sublocalitysel').html(''); 
    $('#localitysel').html('');
    var theCity = $(this).val();
    fillLocality(theCity)
});

//accordeon ubication selection
    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var panel = this.nextElementSibling;
            if (panel.style.display === "block") {
                panel.style.display = "none";
            } else {
                panel.style.display = "block";
            }
        });
    }

//Fill localy accordeon
function fillLocality(city){
    localities = sucursales.filter(item => item.state.indexOf(city) != -1);
    localities = sortJSON(localities, 'locality', 'asc');
    cleanLocalities = localities.reduce((acc, curr) => {
        const total = acc.filter(item => item['locality'] === curr['locality']).length;
        if(total == 0) {
            acc.push(curr);
        }
        return acc
    }, []);
    cleanLocalities.sort();
    const html = cleanLocalities.map((item) => ('<p id="'+ item.locality +'" class="locality">' + item.locality + '</p>'));
    $('#search-local').html(html);
    $('.accordeon .panel#search-local').css('display','block');
    $('.panel').removeClass('active');
    $('.acc-local').addClass('active');
    
}

$(document).on('click','.locality', function(){
    $('.accordeon .panel').css('display','none');
    $('.locality').removeClass('active');
    var locality = $(this).attr('id');
    $('#localitysel').html(locality);
    $('#sublocalitysel').html('');
    $(this).addClass('active');
    fillsubLocality(locality);
});

//Create list of 'sucursales'
function fillsubLocality(locality){
    $('#lc-map').addClass('is-active');
    const subLocality = localities.filter(item => item['locality'].indexOf(locality) != -1);
    cleanSubLocalities = subLocality.reduce((acc, curr) => {
       const total = acc.filter(item => item['subLocality'] === curr['subLocality']).length;
        if(total == 0) {
            acc.push(curr);
        }
        return acc
    }, []);
    let html = subLocality.map((item) => ('<a href="#" id='+item.store_number+' class="sucursal"><figure><figcaption><h4>'+item.name+'</h4><p class="uppercase-address">'+item.formateed+'</p><p class="other-data">EL HORARIO DE LAS TIENDAS ES DE 11 AM A 11 PM. PUEDE VARIAR POR SUCURSAL</p></figcaption><img src="/Portals/0/Images/pin.png" alt="Ver mapa"/></figure></a>'));
    $('#search-sublocal').html(html);
}

$(document).on('click', '.sucursal', function(e){
    e.preventDefault();
    $('.sucursal').css('display','none');
    const subCode  = $(this).attr('id');
    const selectSuc = cleanSubLocalities.filter(item => item.store_number.indexOf(subCode) != -1);
    $('#sublocalitysel').html(selectSuc[0].subLocality);
    initMap(selectSuc[0]);
    setupMarksCluster(selectSuc);
});

function setupMarksCluster(data) {
    if (!data) return;
    const markers = data.map(item => {
        // Create marker
        _lat = parseFloat(item.lat);
        _lng = parseFloat(item.lng);
        console.log('create marker');
        const marker = new google.maps.Marker({
            position: { lat: _lat, lng:_lng },
            icon: mapMarkerIcon
        });
        // Set listener
        const customData = {
            code: item.code,
            name: item.name,
            address: {
                street: item.street,
                number: item.number,
                complete: item.formatted,
                city: item.locality,
                neighborhood: item.subLocality
            },
            position: {
                lat: _lat,
                lng: _lng
            }
        };
        marker.addListener('click', () => showMarkerInfo(customData));
        return marker;
    });
    // Create cluster
    const markerCluster = new MarkerClusterer(map, markers, { imagePath: 'https://s3.amazonaws.com/ktbots/m' });
}

// Displays information from marker
function showMarkerInfo(customData) {
    $(mapDialogDiv).addClass(mapDialogActive);

    // Fill the information from the div
    if (customData.hasOwnProperty('name')) {
        $(`.${mapDialog}heading`).text(customData.name);
    }
    if (customData.hasOwnProperty('address')) {
        if (customData.address.hasOwnProperty('complete')) {
            $(`.${mapDialog}address`).text(customData.address.complete);
        }
    }
}

// Center map on markaer
function centerMapWithMarker(lat, lng) {
    console.log('lat:' + lat);
    map.setZoom(16);
    map.setCenter(new google.maps.LatLng(lat, lng));
}

// Order json
function sortJSON(data, key, orden) {
    return data.sort(function (a, b) {
        var x = a[key],
        y = b[key];

        if (orden === 'asc') {
            return ((x < y) ? -1 : ((x > y) ? 1 : 0));
        }

        if (orden === 'desc') {
            return ((x > y) ? -1 : ((x < y) ? 1 : 0));
        }
    });
}

});