import { bboxFromGeoJSON, TomTomConfig } from '@tomtom-org/maps-sdk/core';
import { RoutingModule, TomTomMap } from '@tomtom-org/maps-sdk/map';
import { calculateRoute, geocodeOne } from '@tomtom-org/maps-sdk/services';
const chargerFastSVG = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"120\" height=\"140\">\n    <path d=\"M63.95 137.516c6.556-12.737 19.098-21.09 30.828-29.388C110.046 97.324 120 79.603 120 59.574 120 26.671 93.138 0 60 0S0 26.671 0 59.574c0 20.029 9.954 37.75 25.22 48.55 11.734 8.302 24.274 16.652 30.83 29.388 1.706 3.316 6.194 3.316 7.9 0z\"\n          fill=\"#19cfbc\"/>\n    <path d=\"M91.298 103.272C105.052 93.544 114 77.596 114 59.574c0-29.61-24.176-53.617-54-53.617S6 29.964 6 59.574c0 18.022 8.95 33.97 22.7 43.698l2.27 1.601c10.172 7.153 21.922 15.423 29.03 27.416 7.104-11.993 18.858-20.259 29.03-27.416l2.268-1.601zm1.468 6.274c-11.13 7.845-22.632 15.957-28.816 27.966-1.706 3.316-6.194 3.316-7.9 0-6.182-12.009-17.686-20.121-28.816-27.966l-2.016-1.422C9.954 97.324 0 79.603 0 59.574 0 26.671 26.862 0 60 0s60 26.671 60 59.574c0 20.029-9.954 37.75-25.222 48.55l-2.016 1.422z\"\n          fill-opacity=\".3\"/>\n    <path d=\"M53.038 87.178l18.637-42.65 1.034-2.426c-4.009 1.215-12.965 3.528-12.994 3.622l5.142-15.177H53.362l-1.166 5.856-4.905 21.224 12.957-3.72-7.21 33.271zm-25.417 0l18.636-42.65 1.034-2.426c-4.008 1.215-12.965 3.528-12.993 3.622l5.141-15.177H27.945l-1.167 5.856-4.905 21.224 12.958-3.72-7.21 33.271zm50.835 0l18.636-42.65 1.035-2.426c-4.009 1.215-12.965 3.528-12.994 3.622l5.141-15.177H78.78l-1.166 5.856-4.905 21.224 12.957-3.72-7.21 33.271z\"\n          fill=\"#fff\"/>\n</svg>\n";
const chargerRegularSVG = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"120\" height=\"140\">\n    <path d=\"M63.95 137.516c6.556-12.737 19.098-21.09 30.828-29.388C110.046 97.324 120 79.603 120 59.574 120 26.671 93.138 0 60 0S0 26.671 0 59.574c0 20.029 9.954 37.75 25.22 48.55 11.734 8.302 24.274 16.652 30.83 29.388 1.706 3.316 6.194 3.316 7.9 0z\"\n          fill=\"#19cfbc\"/>\n    <path d=\"M91.298 103.272C105.052 93.544 114 77.596 114 59.574c0-29.61-24.176-53.617-54-53.617S6 29.964 6 59.574c0 18.022 8.95 33.97 22.7 43.698l2.27 1.601c10.172 7.153 21.922 15.423 29.03 27.416 7.104-11.993 18.858-20.259 29.03-27.416l2.268-1.601zm1.468 6.274c-11.13 7.845-22.632 15.957-28.816 27.966-1.706 3.316-6.194 3.316-7.9 0-6.182-12.009-17.686-20.121-28.816-27.966l-2.016-1.422C9.954 97.324 0 79.603 0 59.574 0 26.671 26.862 0 60 0s60 26.671 60 59.574c0 20.029-9.954 37.75-25.222 48.55l-2.016 1.422z\"\n          fill-opacity=\".3\"/>\n    <path d=\"M40.33 87.178l18.636-42.65L60 42.102c-4.009 1.215-12.965 3.528-12.994 3.622l5.142-15.177H40.653l-1.166 5.856-4.905 21.224 12.958-3.72-7.21 33.271zm25.417 0l18.637-42.65 1.034-2.426c-4.009 1.215-12.965 3.528-12.994 3.622l5.141-15.177H66.071l-1.166 5.856L60 57.627l12.957-3.72-7.21 33.271z\"\n          fill=\"#fff\"/>\n</svg>\n";
const chargerSlowSVG = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"120\" height=\"140\">\n    <path d=\"M63.95 137.516c6.556-12.737 19.098-21.09 30.828-29.388C110.046 97.324 120 79.603 120 59.574 120 26.671 93.138 0 60 0S0 26.671 0 59.574c0 20.029 9.954 37.75 25.22 48.55 11.734 8.302 24.274 16.652 30.83 29.388 1.706 3.316 6.194 3.316 7.9 0z\"\n          fill=\"#19cfbc\"/>\n    <path d=\"M91.298 103.272C105.052 93.544 114 77.596 114 59.574c0-29.61-24.176-53.617-54-53.617S6 29.964 6 59.574c0 18.022 8.95 33.97 22.7 43.698l2.27 1.601c10.172 7.153 21.922 15.423 29.03 27.416 7.104-11.993 18.858-20.259 29.03-27.416l2.268-1.601zm1.468 6.274c-11.13 7.845-22.632 15.957-28.816 27.966-1.706 3.316-6.194 3.316-7.9 0-6.182-12.009-17.686-20.121-28.816-27.966l-2.016-1.422C9.954 97.324 0 79.603 0 59.574 0 26.671 26.862 0 60 0s60 26.671 60 59.574c0 20.029-9.954 37.75-25.222 48.55l-2.016 1.422z\"\n          fill-opacity=\".3\"/>\n    <path d=\"M53.038 87.178l18.637-42.65 1.034-2.426c-4.009 1.215-12.965 3.528-12.994 3.622l5.142-15.177H53.362l-1.166 5.856-4.905 21.224 12.957-3.72-7.21 33.271z\" fill=\"#fff\"/>\n</svg>\n";
import './style.css';
import { API_KEY } from './config';

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

(async () => {
    const waypoints = await Promise.all(['Munich', 'Paris'].map(geocodeOne));

    const map = new TomTomMap({
        mapLibre: {
            container: 'sdk-map',
            bounds: bboxFromGeoJSON(waypoints),
            fitBoundsOptions: { padding: 100 },
        },
    });

    const routingModule = await RoutingModule.get(map, {
        chargingStops: {
            text: {
                title: ['format', ['get', 'chargingDuration'], { 'text-color': '#243882' }],
            },
            icon: {
                customIcons: [
                    { id: 'slow-speed-charger', image: chargerSlowSVG },
                    { id: 'regular-speed-charger', image: chargerRegularSVG },
                    { id: 'fast-speed-charger', image: chargerFastSVG },
                ],
                mapping: {
                    basedOn: 'chargingSpeed',
                    value: {
                        slow: 'slow-speed-charger',
                        regular: 'regular-speed-charger',
                        fast: 'fast-speed-charger',
                        'ultra-fast': 'fast-speed-charger',
                    },
                },
            },
        },
    });
    routingModule.showWaypoints(waypoints);

    const route = await calculateRoute({
        locations: waypoints,
        vehicle: {
            engineType: 'electric',
            model: { variantId: '54B969E8-E28D-11EC-8FEA-0242AC120002' },
            state: { currentChargeInkWh: 5 },
            preferences: {
                chargingPreferences: { minChargeAtDestinationInkWh: 5, minChargeAtChargingStopsInkWh: 5 },
            },
        },
    });
    routingModule.showRoutes(route);
})();