const { MichelinSDKClient } = require('@mappingfactory/sdk-js');

const fetch = require('isomorphic-fetch');
const { MichelinSDKClient } = require('@mappingfactory/sdk-js');

import { MichelinSDKClient } from '@mappingfactory/sdk-js';

// Replace 'YOUR_API_KEY' with your actual Michelin API key
const apiKey = 'YOUR_API_KEY';

const sdk = new MichelinSDKClient({ apiKey });

// Load and initialize the Search class
const search = await sdk.loadSearchLibrary();

// You can also access the Search class directly from the MichelinSDKClient instance after initialization using `loadSearchLibrary`
const search = sdk.Search;

const address = 'Paris, France';
const options = {
  limit: 5,
  language: 'en-US',
  // Add more options if needed
};

try {
  const result = await search.geocoding({ address, ...options });
  console.log(result);
} catch (error) {
  console.error('Geocoding failed:', error.message);
}

const element = document.getElementById('autocomplete');
const options = {
  debounce: 300,
  allowTab: true,
  input: {
    placeholder: 'Search for a location',
  },
  dropdown: {
    noResultsOpen: true,
    position: 'right',
  },
  dropdownItem: {
    highlight: true,
  },
  // Add more options if needed
};

try {
  const autocomplete = await search.autocomplete(element, options);

  autocomplete._on('selected', (result) => {
    console.log('Selected location:', result);
  });
} catch (error) {
  console.error('Autocomplete initialization failed:', error.message);
}

...
// Replace 'YOUR_API_KEY' with your actual Michelin API key
const apiKey = 'YOUR_API_KEY';

const sdk = new MichelinSDKClient({ apiKey });

// Load and initialize the `DirectionWrapper` class and resolve the promise with the Direction wrapper
const directionWrapper = await sdk.loadDirectionLibrary();

// You can access the `DirectionWrapper` class directly from the MichelinSDKClient instance
const direction = sdk.Direction;

// Set options for route calculation using the `DirectionWrapper` class
const formData = {
  coordinates: [
    { latitude: 48.8566, longitude: 2.3522 }, // Paris, France
    { latitude: 51.5074, longitude: -0.1278 }, // London, UK
  ],
  mode: 'fastest',
  language: 'en',
};

sdk.Direction.setFormData(formData);

// Load and initialize the `DirectionWrapper` class and resolve the promise with the Direction wrapper
const directionWrapper = await sdk.loadDirectionLibrary();

// Load and initialize the `MapLibreWrapper` class and resolve the promise with the MapLibre Client
const maplibregl = await sdk.loadMapLibreLibrary();

// Set up the map
const map = new maplibregl.Map({
  container: 'map',
  style: 'my-map-style.json',
  center: [2.3522, 48.8566],
  zoom: 5,
});

// Set the map for the `DirectionWrapper` class
sdk.Direction.setMap(map);

map.on('load', async () => {
  // Get the direction information (We assume in this example that the `formData` has already been set)
  const dataSource = await directionWrapper.client.search();

  // Show the trace on the map for the default layer
  const route = dataSource.routes[0];
  sdk.Direction.showTrace({
    visible: true,
    route,
  });

  // Set the trace width and color for the default layer
  sdk.Direction.setTraceWidth({
    width: 5,
  });
  sdk.Direction.setTraceColor({
    color: '#ff0000',
  });

  // Get the visibility of the trace for the default layer
  const traceVisible = sdk.Direction.getTraceVisibility();

  if (traceVisible) {
    console.log('Trace is visible!');

    sdk.Direction.removeTrace(); // This will remove the default trace from the map
    console.log('Trace has been removed from the map!');
  }
});

// Load and initialize the `DirectionWrapper` class and resolve the promise with the Direction wrapper
const directionWrapper = await sdk.loadDirectionLibrary();

// Load and initialize the `MapLibreWrapper` class and resolve the promise with the MapLibre Client
const maplibregl = await sdk.loadMapLibreLibrary();

// Set up the map
const map = new maplibregl.Map({
  container: 'map',
  style: 'my-map-style.json',
  center: [2.3522, 48.8566],
  zoom: 5,
});

// Set the map for the `DirectionWrapper` class
sdk.Direction.setMap(map);

map.on('load', async () => {
  // Get the direction information (We assume in this example that the `formData` has already been set)
  const dataSource = await directionWrapper.client.search();

  const firstRoute = dataSource.routes[0];
  const lastRoute = dataSource.routes[dataSource.routes.length - 1];

  // Show the trace on the map for a specific layer, if the layer do not exists it will be created
  sdk.Direction.showTrace({
    visible: true,
    route,
    layerId: 'first-route',
  });

  // Set the trace width and color for a specific layer
  sdk.Direction.setTraceWidth({
    width: 5,
    layerId: 'first-route',
  });

  sdk.Direction.setTraceColor({
    color: '#ff0000',
    layerId: 'first-route',
  });

  // Here we show the trace on the map for `last-route` layer, with defaults values for color and width
  sdk.Direction.showTrace({
    visible: true,
    route,
    layerId: 'last-route',
  });

  // Get the visibility of the trace for the default layer
  const firstRouteVisible = sdk.Direction.getTraceVisibility('first-route');
  const lastRouteVisible = sdk.Direction.getTraceVisibility('last-route');

  if (firstRouteVisible && lastRouteVisible) {
    console.log('All routes traces are visible!');

    // Remove the last-route trace from the map
    sdk.Direction.removeTrace('last-route');
  }

  // Now let's toggle the visibility of the first route trace based on a button we have in the DOM

  const button = document.getElementById('btn');

  button.addEventListener('click', () => {
    // We first get the current visibility of the trace
    const isVisible = sdk.Direction.getTraceVisibility('first-route');

    // And then we toggle the visibility of the trace, if you do not pass a `route` parameter, the DirectionWrapper will use the last route used
    sdk.Direction.showTrace({
      visible: !isVisible,
      layerId: 'first-route',
    });
  });
});

try {
  // Replace 'YOUR_API_KEY' with your actual Michelin API key
  const apiKey = 'YOUR_API_KEY';

  const sdk = new MichelinSDKClient({ apiKey });

  // Load and initialize the `DirectionWrapper` class and resolve the promise with the Direction wrapper
  const directionWrapper = await sdk.loadDirectionLibrary();

  // Set options for route calculation using the `DirectionWrapper` class
  const formData = {
    coordinates: [
      { latitude: 48.8566, longitude: 2.3522 }, // Paris, France
      { latitude: 51.5074, longitude: -0.1278 }, // London, UK
    ],
    mode: 'fastest',
    language: 'en',
  };
  sdk.Direction.setFormData(formData);

  const directions = await directionWrapper.client.search(); // This will uses the `formData` set above by the `DirectionWrapper` function `setFormData`
  console.log('Directions:', directions);
} catch (error) {
  console.error('Failed to retrieve directions:', error.message);
}

...
// Replace 'YOUR_API_KEY' with your genuine Michelin API key
const apiKey = 'YOUR_API_KEY';

const sdk = new MichelinSDKClient({ apiKey });

// Load and initialize the `RoadSheetWrapper` class and return the Roadsheet Client upon resolving the promise
const roadsheetWrapper = await sdk.loadRoadsheetLibrary();
/**
 * The RoadsheetWrapper is also accessible directly from the MichelinSDKClient instance : `sdk.Roadsheet`
 */

const routePoints = {routes: [{...}], waypoints: [{...}, {...}, {...}]};

const html = await roadsheetWrapper.client.getHtml(routePoints.routes[0], routePoints.waypoints, routePoints.language);

// Define options for your roadsheet using the `RoadSheetWrapper` class
const formData = {
  language: 'en-GB',
  startDate: Date.now(),
  disabledManeuvers: ['merge', 'continue'],
  primaryMentions: ['road_sign', 'toll_collection'],
  maxSecondaryMentions: 0,
};

sdk.Roadsheet.setFormData(formData);

// Replace 'YOUR_API_KEY' with your actual Michelin API key
const apiKey = 'YOUR_API_KEY';

const sdk = new MichelinSDKClient({ apiKey });

// Kickstart the `MapLibreWrapper` class and retrieve the MapLibre Client once the promise is resolved
const mapLibreClient = await sdk.loadMapLibreLibrary();

// You can now directly interface with the `MapLibreWrapper` through the MichelinSDKClient instance
const maplibre = sdk.MapLibre;