const headers = new Headers( {
    'Content-Type': 'application/json'
} );

const shops = JSON.parse( fastbookingVars.shops );

const getLocations = function(mapBoxEndPoint) {
    return fetch(mapBoxEndPoint, {
        method: 'get',
        headers: headers,
        credentials: 'same-origin'
    })
    .then(function(response) {
        return response.ok ? response.json() : [];
    })
};

const getLocationSelected = function() {
    let homeCoordinates = '';
    document.querySelectorAll('input[name="locationSelected"]').forEach(function(item) {
        if (item.checked) {
            homeCoordinates = JSON.stringify(item.value);
        }
    });

    return homeCoordinates;
};

const getShops = function(homeCoordinates, limit) {
    homePoint       = turf.point(JSON.parse(homeCoordinates).split(','));
    let sortShops   = [];
    
    for(shop of shops) {
        let shopPoint   = turf.point([shop.longitude, shop.latitude]);
        let currentShop = [
            shop.ID,
            turf.distance(homePoint, shopPoint),
            shop.name,
            shop.url
        ];

        if (currentShop[1] <= limit)
            sortShops.push(currentShop);
    }

    sortShops.sort((shopA, shopB) => {
        return shopA[1] - shopB[1];
    });

    listSize = sortShops.length >= 3 ? 3 : sortShops.length;

    return sortShops.slice(0, listSize);
}

const setCookies = function(timeStamp, homeCoordinates, shopSelectedId, isDelivery) {
    let cookieDuration  = 60 * 60 * 24 * 7;

    document.cookie = 'gs_mb_datetime=' + timeStamp + ';path=/;max-age=' + cookieDuration.toString();
    document.cookie = 'gs_mb_home=' + homeCoordinates + ';path=/;max-age=' + cookieDuration.toString();
    document.cookie = 'gs_mb_shop=' + shopSelectedId + ';path=/;max-age=' + cookieDuration.toString();
    document.cookie = 'gs_mb_is_delivery=' + isDelivery + ';path=/;max-age=' + cookieDuration.toString();
}
if(jQuery('#gs-mb-change-preferences').length > 0) {
    document.querySelector('#gs-mb-change-preferences').addEventListener('click', function(event) {
        event.preventDefault();
    
        document.querySelector('#gs-mb-prepare-purchase').style.display = 'none';
        document.querySelector('#fastbooking-form').style.display       = 'flex';
    })
}

if(jQuery('#gs-mb-purchase').length > 0) {
    document.querySelector('#gs-mb-purchase').addEventListener('click', function(event) {
        event.preventDefault();
        let formError = document.querySelector('.gs-mb-form-error');

        let home            = document.querySelector('#home').value;
        let date            = document.querySelector('#date').value;
        let time            = document.querySelector('#time').value;
        let timeStamp       = new Date(date + ' ' + time).getTime()/1000;
        let now             = new Date().getTime()/1000;
        let mapBoxEndPoint  = 'https://api.mapbox.com/geocoding/v5/mapbox.places/' + home + '.json?access_token=' + fastbookingVars.mapboxToken + '&language=es';

        getLocations(mapBoxEndPoint)
        .then(function(response) {
            formError.innerHTML = '';

            if (response.length <= 0) {
                formError.innerHTML = fastbookingVars.homeNotSetNotice;
                return;
            }

            if (now >= timeStamp) {
                formError.innerHTML = fastbookingVars.oldDateNotice;
                return;
            }

            if (isNaN(timeStamp)) {
                formError.innerHTML = fastbookingVars.dateNotFoundNotice;
                return;
            }

            let locations = '<h2>' + fastbookingVars.selectALocationTitle + '</h2>';
            response.features.forEach(function(item) {
                locations += '<div class="locations-wrapper"> <label><input type="radio" name="locationSelected" value="' + item.geometry.coordinates + '">' + '<span>' + item.place_name + '</span></label></div>';
            });
            locations += '<div class="btns-locations"><button id="gs-mb-take-away" type="submit" name="takeAway">' + fastbookingVars.takeAwayButton + '</button><button id="gs-mb-delivery" type="submit" name="delivery">' + fastbookingVars.deliveryButton + '</button>';

            document.querySelector('.gs-mb-fastbooking-modal').innerHTML = locations;

            let homeCoordinates = '';
            let shopSelectedId  = null;
            let shopSelectedUrl = '';

            document.querySelector('#gs-mb-delivery').addEventListener('click', function(event) {
                event.preventDefault();
                homeCoordinates = getLocationSelected();

                if ('' === homeCoordinates) {
                    formError.innerHTML = fastbookingVars.homeNotSelected;
                    return;
                }

                let shopList = getShops(homeCoordinates, 2.5);

                if (shopList.length <= 0) {
                    formError.innerHTML = fastbookingVars.shopNotFoundNotice;
                    return;
                }

                shopSelectedId      = shopList[0][0];
                shopSelectedUrl     = shopList[0][3];

                setCookies(timeStamp, homeCoordinates, shopSelectedId, 1);

                document.querySelector('#fastbooking-form').submit();
            });

            document.querySelector('#gs-mb-take-away').addEventListener('click', function(event) {
                event.preventDefault();
                homeCoordinates = getLocationSelected();

                if ('' === homeCoordinates) {
                    formError.innerHTML = fastbookingVars.homeNotSelected;
                    return;
                }

                let shopList = getShops(homeCoordinates, 30);
                if (shopList.length <= 0) {
                    formError.innerHTML = fastbookingVars.shopNotFoundNotice;
                    return;
                }

                let shopsModal = '<h2>' + fastbookingVars.selectALocationTitle + '</h2>';
                shopList.forEach(function(item) {
                    shopsModal += '<input type="radio" name="shopSelected" value="' + item[0] + '" data-url="' + item[3] + '">' + item[2];
                });
                shopsModal += '<button id="gs-mb-confirm-purchase" type="submit" name="confirmPurchase">' + fastbookingVars.confirmPurchaseButton + '</button>';

                document.querySelector('.gs-mb-fastbooking-modal').innerHTML = shopsModal;

                document.querySelector('#gs-mb-confirm-purchase').addEventListener('click', function(event) {
                    event.preventDefault();

                    document.querySelectorAll('input[name="shopSelected"]').forEach(function(item) {
                        if (item.checked) {
                            shopSelectedId  = item.value;
                            shopSelectedUrl = item.getAttribute('data-url');
                        }
                    });

                    if (null === shopSelectedId) {
                        formError.innerHTML = fastbookingVars.shopNotSelected;
                        return;
                    }

                    setCookies(timeStamp, homeCoordinates, shopSelectedId, 0);

                    document.querySelector('#fastbooking-form').submit();
                });
            });
        });
    });
}