import { bboxFromGeoJSON, TomTomConfig, Waypoint } from '@tomtom-org/maps-sdk/core';
import {
    PlacesModule,
    POIsModule,
    RoutingModule,
    StandardStyleID,
    standardStyleIDs,
    TomTomMap,
    TrafficIncidentsModule,
} from '@tomtom-org/maps-sdk/map';
import { calculateRoute, DiscoverPlacesResponse, discoverPlaces } from '@tomtom-org/maps-sdk/services';
import './style.css';
import { API_KEY } from './config';
import { initTogglePanel } from './togglePanel';

// (Set your own API key when working in your own environment)
TomTomConfig.instance.put({ apiKey: API_KEY, language: 'es-ES' });

(async () => {
    const locations: Waypoint[] = (
        await Promise.all([
            discoverPlaces({ query: 'Hyde Park Corner, London' }),
            discoverPlaces({ query: 'Leman Street, London' }),
        ])
    ).map((result: DiscoverPlacesResponse) => result.features[0]);

    const map = new TomTomMap({
        mapLibre: {
            container: 'sdk-map',
            bounds: bboxFromGeoJSON(locations),
            fitBoundsOptions: { padding: 100 },
        },
    });
    await POIsModule.get(map, {
        filters: { categories: { show: 'only', values: ['TOURIST_ATTRACTION'] } },
    });
    await TrafficIncidentsModule.get(map, {
        icons: { visible: false },
        filters: { magnitudes: { show: 'all-except', values: ['minor'] } },
    });
    const routingModule = await RoutingModule.create(map);
    routingModule.showWaypoints(locations);
    routingModule.showRoutes(await calculateRoute({ locations }));

    const position = map.mapLibreMap.getCenter().toArray();
    (await PlacesModule.create(map)).show(
        await discoverPlaces({ query: 'London Eye', geoBias: { position }, limit: 1 }),
    );
    (await PlacesModule.create(map)).show(
        await discoverPlaces({
            query: 'City Hall',
            geoBias: { position },
            filters: { poiCategories: ['GOVERNMENT_OFFICE'] },
        }),
    );

    const resetStateToggle = document.querySelector('#ui-resetState') as HTMLInputElement;
    const stylesSelector = document.querySelector('#ui-mapStyles') as HTMLSelectElement;
    for (const id of standardStyleIDs) {
        stylesSelector.add(new Option(id));
    }
    stylesSelector.addEventListener('change', async (event) => {
        const style = (event.target as HTMLOptionElement).value as StandardStyleID;
        await map.setStyle(style, { resetState: resetStateToggle.checked });
    });

    initTogglePanel();
})();