Bing Map

export default (texBoxId, containerId) => {
  function loadMapScenario() {
    function selectedSuggestion(suggestionResult) {
      // eslint-disable-next-line  no-unused-vars
      const { location, title, subtitle } = suggestionResult;
      const { longitude, latitude } = location;
      const modalWindow = document.querySelector('#find-courses-dialog');

      modalWindow.querySelector('.search-longitude').value = longitude;
      modalWindow.querySelector('.search-latitude').value = latitude;
      modalWindow.querySelector('.postcode-search').removeAttribute('disabled');
    }

    function searchLoad() {
      const options = { maxResults: 3 };
      const manager = new window.Microsoft.Maps.AutosuggestManager(options);

      manager.attachAutosuggest(
        `#${texBoxId}`,
        `#${containerId}`,
        selectedSuggestion
      );
    }

    function onError(message) {
      // eslint-disable-next-line  no-console
      console.log(message);
    }

    const mapIntervel = setInterval(() => {
      if (window.Microsoft.Maps.loadModule) {
        window.Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', {
          callback: searchLoad,
          errorCallback: onError,
        });
        clearInterval(mapIntervel);
      }
    }, 100);
  }

  const loadBingMapSerch = () => {
    const tag = document.createElement('script');
    // eslint-disable-next-line no-undef
    const mapScriptUrl = `//www.bing.com/api/maps/mapcontrol?key=${bingMapKey}`;

    tag.setAttribute('defer', '');
    tag.setAttribute('async', '');
    tag.setAttribute('type', 'text/javascript');
    tag.setAttribute('src', mapScriptUrl);
    const firstScriptTag = document.getElementsByTagName('script')[0];

    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    tag.onload = () => {
      loadMapScenario();
    };
  };

  const loadSearch = document.querySelector(`#${texBoxId}`);

  if (!loadSearch) {
    return;
  }
  loadBingMapSerch();
};