const MapViewController = require('./map-view-controller');
/**
 * <h4>CODE SNIPPET</h4>
 *
 * Here's an example on how to implement this in your html view:
 * <div id="codeSnippet">
 * <pre id="textToCopy">
 * <p style="font-weight: bold;position: absolute;top: 10px;left: 10px;text-decoration: underline">HTML</p>
 * &lt;map-view
 *   situm-api-key="YOUR_SITUM_API_KEY"
 *   building-identifier="YOUR_BUILDING_IDENTIFIER"
 *   remote-identifier="YOUR_REMOTE_IDENTIFIER"
 * /&gt;
 * </pre>
 *
 * <button id="copySnippetButton">Copy</button>
 * </div>
 *
 * <script>
    document.getElementById("copySnippetButton").addEventListener("click", function() {
      var textToCopy = document.getElementById("textToCopy");

      var range = document.createRange();
      range.selectNode(textToCopy);
      window.getSelection().removeAllRanges();
      window.getSelection().addRange(range);

      document.execCommand("copy");
      window.getSelection().removeAllRanges();
      this.textContent = "Copied!";
    });
    </script>
 *
 * <h4>ATTRIBUTES</h4>
 * <dl>
 *   <dt>situm-api-key</dt>
 *   <dd>Your API Key to authenticate yourself in our plugin.
 *      You can manage out your Situm API Key in <a href="https://dashboard.situm.com/accounts/profile"> https://dashboard.situm.com/accounts/profile</a>.</dd>
 *
 *   <dt>building-identifier</dt>
 *   <dd>The identifier of the building you want to display on the map.
 *      You can manage this identifier with this guide <a href="https://situm.com/docs/sdk-cartography/#building-details"> https://situm.com/docs/sdk-cartography/#building-details</a>.</dd>
 *
 *   <dt>remote-identifier</dt>
 *   <dd>An identifier that allows you to remotely configure all map settings.</dd>
 *
 *   <dt>language</dt>
 *   <dd>Choose the language that map-view will use to display its UI by specifying an ISO 639-1 code.
 *      You can also change the language by calling {@link MapViewController.setLanguage()}.
 *      Checkout the <a href="https://situm.com/docs/13-internationalization/">Situm docs</a> to see the list of supported languages.</dd>
 *
 *   <dt>viewer-domain</dt>
 *   <dd>A parameter that allows you to specify which domain will be displayed inside our webview.
 *       Default is <a href="https://map-viewer.situm.com">https://map-viewer.situm.com</a></dd>
 * </dl>
 *
 * @namespace MapView
 */
class MapView extends HTMLElement {
  _viewerDomain = 'https://map-viewer.situm.com';

  constructor() {
    super();
  }

  connectedCallback() {
    MapViewController._prepare(this);
    MapViewController._getDeviceId((deviceId) => {
      this.innerHTML = `
        <iframe
          id="map-view-iframe"
          src="${this._getViewerURL(deviceId)}"
          width="100%"
          height="100%"
          style="border: none; box-shadow: none;"
        />
      `;
    });
    window.addEventListener('message', this._messageReceivedCallback);
  }

  _getViewerDomain() {
    return this._viewerDomain;
  }

  _getViewerURL(deviceId) {
    let viewerDomain = this._formatValidDomain(
      this.getAttribute('viewer-domain')
    );
    let situmApiKey = this.getAttribute('situm-api-key')
      ? this.getAttribute('situm-api-key')
      : '';
    let buildingIdentifier = this.getAttribute('building-identifier')
      ? this.getAttribute('building-identifier')
      : '';
    let language = this.getAttribute('language')
      ? this.getAttribute('language')
      : '';

    let situmApiKeyQP = situmApiKey.length > 0 ? `apikey=${situmApiKey}` : '';
    let buildingIdentifierQP =
      buildingIdentifier.length > 0 ? `&buildingid=${buildingIdentifier}` : '';
    let languageQP = language.length > 0 ? `&lng=${language}` : '';
    let deviceIdQP = deviceId ? `&deviceId=${deviceId}` : '';

    let query = `${situmApiKeyQP}${buildingIdentifierQP}${languageQP}${deviceIdQP}&mode=embed`;

    let remoteIdentifier = this.getAttribute('remote-identifier');
    if (remoteIdentifier && remoteIdentifier.length > 0) {
      return `${viewerDomain}/id/${remoteIdentifier}?${query}`;
    }
    return `${viewerDomain}/?${query}`;
  }

  _formatValidDomain(domain) {
    let result = domain;
    if (result == null) {
      return 'https://map-viewer.situm.com';
    }
    if (!result.startsWith('https://') && !result.startsWith('http://')) {
      result = `https://${result}`;
    }
    if (result.endsWith('/')) {
      result = result.substring(0, result.length - 1);
    }
    this._viewerDomain = result;
    return result;
  }

  _messageReceivedCallback(m) {
    try {
      const msg = JSON.parse(m.data);
      if (msg && msg.type) {
        MapViewController._handleMapViewMessages(msg);
      }
    } catch (error) {
      console.warn('Got unparseable message:', m);
    }
  }

  /**
   * MapView was loaded.
   * The {@link MapViewController} will be sent by the callback.
   * @param {Function} cb The callback that gives back the controller of this visual component.
   */
  static onLoad(cb) {
    // For now, setting the on-load callback from the integrator is done using this (static) bridge.
    // Probably this could be improved.
    MapViewController._setOnLoadCallback(cb);
  }
}

customElements.define('map-view', MapView);

module.exports = MapView;