import { useLayoutStore } from '../stores/layout';
import REST from '../api/rest-axios';

export function setupMapStore(mapStore, map, settings) {
    mapStore.map = map;
    mapStore.defaultMapCenter = map.getCenter();
    mapStore.maxZoom = settings.settings.maxZoom;
    mapStore.defaultZoomDesktop = settings.settings.minZoom;
    mapStore.defaultZoomMobile = settings.settings.minZoom - 1;
    mapStore.map.flyTo([mapStore.defaultMapCenter.lat, mapStore.defaultMapCenter.lng], useLayoutStore().isDesktop ? mapStore.defaultZoomDesktop : mapStore.defaultZoomMobile);
    mapStore.checkReducedMotion();
}

// not working
// may or may not rework on it later
export async function preloadEtapesTiles(mapStore, map) {
    function waitForEvent(el, eventName) {
        return new Promise((resolve) => {
            el.once(eventName, resolve);
        });
    }

    const tilesSource = map._layers.layer._url;

    const response = await REST.get(`/jsonapi/node/etape/`);

    const defaultZoom = useLayoutStore().isDesktop ? mapStore.defaultZoomDesktop : mapStore.defaultZoomMobile;

    let tilesCached = new Set();

    for (const etape of response.data.data) {
        const etapeCoords = {
            title: etape.attributes.title,
            lat: etape.attributes.field_geofield.lat,
            lng: etape.attributes.field_geofield.lon,
        };
        
        for (let zoom = defaultZoom; zoom <= mapStore.maxZoom; zoom++) {            
            map.flyTo([etapeCoords.lat, etapeCoords.lng], zoom, { animate: true, duration: 0.001 });
            await waitForEvent(map, 'moveend zoomend');
            
            let allTilesCached = Object.keys(map._layers.layer._tiles).every(tile => tilesCached.has(tile));

            const tileLayer = Object.values(map._layers).find(layer => layer instanceof L.TileLayer);

            if (!allTilesCached && tileLayer._loading) {
                await waitForEvent(tileLayer, 'load');
                Object.keys(map._layers.layer._tiles).forEach(tile => {
                    if (!tilesCached.has(tile)) {
/*                         const tileObject = map._layers.layer._tiles[tile];
                        let img = new Image();
                        const url = tilesSource
                                    .replace('{z}', tileObject.coords.z)
                                    .replace('{x}', tileObject.coords.x)
                                    .replace('{y}', tileObject.coords.y);
                        img.src = url; */
                        tilesCached.add(tile)
                    }
                });
            }

        }
    }
    // console.log(tilesCached);
    mapStore.resetMap(false, 0);
}