/* eslint-env browser */

import { negotiateLanguages } from 'fluent-langneg';
import { MessageContext } from 'fluent';
import { DOMLocalization } from '../../fluent-dom/src/index';

function documentReady() {
  const rs = document.readyState;
  if (rs === 'interactive' || rs === 'completed') {
    return Promise.resolve();
  }

  return new Promise(
    resolve => document.addEventListener(
      'readystatechange', resolve, { once: true }
    )
  );
}

function getMeta(elem) {
  return {
    available: elem.querySelector('meta[name="availableLanguages"]')
      .getAttribute('content')
      .split(',').map(s => s.trim()),
    default: elem.querySelector('meta[name="defaultLanguage"]')
      .getAttribute('content'),
  };
}

function getResourceLinks(elem) {
  return Array.prototype.map.call(
    elem.querySelectorAll('link[rel="localization"]'),
    el => el.getAttribute('href')
  );
}

function fetchSync(url) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, false);
  xhr.send(null);
  return xhr.responseText;
}

const sync = true;

async function generateContext(locale, resourceIds) {
  const ctx = new MessageContext([locale]);
  for (const resourceId of resourceIds) {
    const url = resourceId.replace('{locale}', locale);
    const source = sync ?
      fetchSync(url) :
      await fetch(url).then(d => d.text());
    ctx.addMessages(source);
  }
  return ctx;
}

const meta = getMeta(document.head);

function * generateMessages(resourceIds) {
  const locales = negotiateLanguages(
    navigator.languages,
    meta.available,
    {
      defaultLocale: meta.default
    }
  );
  for (const locale of locales) {
    // This yields a promise. In the future we'd like to use async iteration.
    yield generateContext(locale, resourceIds);
  }
}

function createLocalization(resourceIds) {
  document.l10n = new DOMLocalization(
    MutationObserver, resourceIds, generateMessages
  );

  document.l10n.ready = documentReady().then(() => {
    document.l10n.connectRoot(document.documentElement);
    return document.l10n.translateRoots().then(() => {
      document.body.style.display = 'block';
    });
  });
}

createLocalization(getResourceLinks(document.head));

@@ -1782,53 +1782,61 @@
 %0A%7D%0A%0A
-function createLocalization(resourceIds) %7B%0A  
+const resourceIds = getResourceLinks(document.head);%0A
 docu
@@ -1868,18 +1868,16 @@
 zation(%0A
-  
   Mutati
@@ -1922,16 +1922,70 @@
 ges%0A
-  
+);%0Awindow.addEventListener('languagechange', document.l10n
 );%0A%0A
-  
 docu
@@ -2031,18 +2031,16 @@
 () =%3E %7B%0A
-  
   docume
@@ -2086,18 +2086,16 @@
 ement);%0A
-  
   return
@@ -2143,18 +2143,16 @@
 %3E %7B%0A    
-  
 document
@@ -2186,74 +2186,14 @@
 k';%0A
-  
   %7D);%0A
-  
 %7D);%0A
-%7D%0A%0AcreateLocalization(getResourceLinks(document.head));%0A

Add languagechange listener to fluent-web