import { initVueContentModale } from './utils/vue-setup';
import { processClickableElements } from './utils/process-clickable-elements';
import { handleReactiveness, setMenuToggle, setRightSectionsWhenLogged } from './utils/layout-setup';
import { initFirstLoadRouting, handleClickableElements, handleBrowserNavigation } from './utils/handle-navigation';
import { setupMapStore, preloadEtapesTiles } from './utils/map-setup';

import initEdgeBuffer from './libs/leaflet.edgebuffer';

import '../scss/main.scss'

// https://www.drupal.org/docs/drupal-apis/javascript-api/javascript-api-overview

(function ($, Drupal, drupalSettings) {
    const CaravaneTheme = function () {
        function init () {            
            // console.log('DrupalSettings', drupalSettings);
            
            const baseUrl = window.location.protocol + "//" + window.location.host;
            const siteName = document.querySelector('#site_name').innerText;
            const router = initVueContentModale();

            handleReactiveness();
            setMenuToggle();
            setRightSectionsWhenLogged(drupalSettings);

            // https://www.drupal.org/docs/extending-drupal/contributed-modules/contributed-module-documentation/leaflet/leaflet-api

            Drupal.behaviors.customLeafletInteraction = {
                attach: function(context, settings) {

                    initEdgeBuffer(L);
                    let mapSettings = settings.leaflet[Object.keys(settings.leaflet)[0]].map;                    
                    mapSettings.layers.layer.edgeBufferTiles = 1;
                    // mapSettings.settings.fadeAnimation = false;
                    
                    $(context).on('leafletMapInit', function (e, settings, map, mapid, markers) {                        
                        const {
                            etapeListLinks,
                            generalListLinks,
                            logoLink,
                            mapIcons,
                            mapContainer,
                        } = processClickableElements();
                        const clickableElements = [...etapeListLinks, ...generalListLinks, logoLink, ...mapIcons, mapContainer];                        

                        setupMapStore(map, settings);

                        // preloadEtapesTiles(map);

                        initFirstLoadRouting(router, baseUrl, siteName);

                        handleClickableElements(clickableElements, router, baseUrl, siteName);

                        window.addEventListener("popstate", () => {
                          handleBrowserNavigation(baseUrl, siteName);
                        });
                    });
                }
            }
        }
        init()
    }
    CaravaneTheme()
})(jQuery, Drupal, drupalSettings)