/*
 * We require a few polyfills in order to support IE11.  These
 * will be needed to be loaded by both the host and the client.
 */
import '@babel/polyfill';
import 'custom-event-polyfill/polyfill.js';
import 'url-polyfill';

/* The iframe coordinator library uses custom elements to
 * embed itself in the host app. If you are targeting browsers
 * that don't support custom elements, you'll need a polyfill.
 * see: https://github.com/webcomponents/custom-elements for
 * more details on configuring the polyfill
 */
import '@webcomponents/custom-elements/src/native-shim.js';
import '@webcomponents/custom-elements/src/custom-elements.js';

/* Import the host library */
import { registerCustomElements } from 'iframe-coordinator/host.js';

/* This will make the custom element `frame-router` available
 * for use in your browser. This element is the primary
 * host interface for the library.
 */
registerCustomElements();

/* This registers three client apps with the `frame-router`
 * element with an id of `coordinator`. `assignedRoute` is the
 * fragment path in the current page that represents the root
 * path for that client. `url` is the page to load in the
 * iframe on that route. It must be a full Url, but you can
 * use the URL construtor to simplify handling
 * clients on the same domain.
 * (e.g. `new URL('/client/app/path/', window.location).toString()`)
 *
 * If the client uses fragment-based routing, the URL should include a hash fragment:
 * http://example.com/client/#/
 *
 * if the client uses pushstate path-based routing, leave the fragment out:
 * e.g. http://example.com/client/
 */
document.getElementById('frame-element').setupFrames(
  {
    client1: {
      url: 'https://example.com/components/example1/#/',
      assignedRoute: '/one'
    },
    client2: {
      url: 'https://example.com/components/example2/#/',
      assignedRoute: '/two',
      sandbox: 'allow-presentation', // optional
      allow: 'microphone https://example.com;' // optional
    }
  },
  {
    locale: 'en-US',
    hostRootUrl: window.location.origin
  }
);

/*
 * We require a few polyfills in order to support IE11.  These
 * will be needed to be loaded by both the host and the client.
 */
import '@babel/polyfill';
import 'custom-event-polyfill/polyfill.js';
import 'url-polyfill';

/* Import the client library */
import { Client } from 'iframe-coordinator/client.js';

/* Create a new instance of the client */
let iframeClient = new Client({
  // This lets the example client work with the cli host by setting it's domain
  // as a valid host origin to post messages to. A production app will probably
  // need to conditionally set this.
  hostOrigin: 'http://localhost:3000'
});

// Add a listener that will handled config data passed from the host to the
// client at startup.
iframeClient.addListener('environmentalData', envData => {
  const appLocale = envData.locale;

  const now = new Date();
  const localizedDate = new Intl.DateTimeFormat(appLocale).format(now);
  console.log(
    `Got locale from host. Current date formatted for ${envData.locale} is: ${localizedDate}`
  );
  displayEnvData(envData);
});

// Listen for published events from the host on the `host.topic` topic
// and log them.
iframeClient.messaging.addListener('host.topic', publication => {
  console.log('Got Publish event:', publication);
});

// Start intercepting link click events for cross-frame routing
iframeClient.start();