window.givikiWidget = {};

window.givikiWidget.dismiss = () => {
  let widgetUnderlay = document.getElementById('givikiWidgetUnderlay');
  widgetUnderlay.style.display = 'none';
};

window.givikiWidget.open = () => {
  let widgetUnderlay = document.getElementById('givikiWidgetUnderlay');
  widgetUnderlay.style.display = 'block';
};

window.givikiWidget.installWidgetOnBody = (options) => {
  let css = document.createElement('link');
  css.rel = 'stylesheet';
  css.media = 'screen';
  css.href = 'https://justicecentre.give.asia/assets/stylesheets/widget.css';
  document.body.appendChild(css);

  let container = document.createElement('div');
  document.body.appendChild(container);
  container.id = 'givikiWidgetContainer';

  if (options.openButton) {
    let openButton = document.createElement('div');
    container.appendChild(openButton);
    openButton.style.backgroundColor = '#E32726';
    openButton.onclick = () => { window.givikiWidget.open(); };
    openButton.id = 'givikiWidgetButton';
    openButton.innerHTML = '<span style="font-weight: 600;">DONATE</span>';
  }

  let underlay = document.createElement('div');
  container.appendChild(underlay);
  underlay.id = 'givikiWidgetUnderlay';
  underlay.onclick = () => { window.givikiWidget.dismiss(); };

  let iframeContainer = document.createElement('div');
  underlay.appendChild(iframeContainer);
  iframeContainer.id = 'givikiWidgetIframeContainer';

  let dismissButton = document.createElement('button');
  let dismissButtonIcon = document.createElement('span');
  dismissButtonIcon.innerHTML = "&times";
  dismissButton.appendChild(dismissButtonIcon);
  iframeContainer.appendChild(dismissButton);
  dismissButton.id = 'givikiWidgetDismissButton';

  let iframe = document.createElement('iframe');
  iframeContainer.appendChild(iframe);
  iframe.frameBorder = 0;
  iframe.scrolling = 'no';
  iframe.id = 'givikiWidgetIframe';
  iframe.screenWidth = 300;
  iframe.src = `https://justicecentre.give.asia/widget/v2/justice-centre-hong-kong?share=${encodeURIComponent(options.shareUrl)}&desktop=${options.isDesktop}`;
  iframeContainer.style.height = '100%';

  if (options.isDesktop) {
    iframeContainer.style.width = '710px';
    iframeContainer.style.height = '700px';
    iframeContainer.style.maxHeight = 'calc(100% - 100px)';
    iframeContainer.style.marginTop = '50px';
    iframe.style.borderRadius = '8px';
    iframe.style.boxShadow = '0 5px 10px 5px rgba(0,0,0,.1);';
    dismissButton.style.top = '10px';
    dismissButton.style.right = '10px';
  } else {
    iframeContainer.style.width = '100%';
    iframe.style.borderRadius = '0';
    iframe.style.boxShadow = 'none';
    dismissButton.style.top = '7px';
    dismissButton.style.right = '7px';
    dismissButton.style.color = '#E32726';
    dismissButton.style.color = 'rgba(0, 0, 0, .54)';
    dismissButton.style.backgroundColor = 'transparent';
  }
};

window.givikiWidget.install = (options) => {
  options = options || {};

  if (!options.hasOwnProperty('openButton')) {
    options.openButton = true;
  }
  if (!options.hasOwnProperty('shareUrl')) {
    options.shareUrl = location.href;
  }

  let w = window,
  d = document,
  e = d.documentElement,
  g = d.getElementsByTagName('body')[0],
  screenWidth = (w.innerWidth || e.clientWidth || g.clientWidth);

  if (!options.hasOwnProperty('isDesktop')) {
    options.isDesktop = (screenWidth > 768);
  }

  docReady(function() {
    window.givikiWidget.installWidgetOnBody(options);
  });
};

(function(funcName, baseObj) {
  funcName = funcName || "docReady";
  baseObj = baseObj || window;
  let readyList = [];
  let readyFired = false;
  let readyEventHandlersInstalled = false;

  function ready() {
    if (!readyFired) {
      readyFired = true;
      for (let i=0; i < readyList.length; i++) {
          readyList[i].fn.call(window, readyList[i].ctx);
      }
      readyList = [];
    }
  }

  function readyStateChange() {
    if ( document.readyState === "complete" ) {
      ready();
    }
  }

  baseObj[funcName] = function(callback, context) {
    if (typeof callback !== "function") {
      throw new TypeError("callback for docReady(fn) must be a function");
    }

    if (readyFired) {
      setTimeout(function() {callback(context);}, 1);
      return;
    } else {
      readyList.push({fn: callback, ctx: context});
    }

    if (document.readyState === "complete" || (!document.attachEvent && document.readyState === "interactive")) {
      setTimeout(ready, 1);
    } else if (!readyEventHandlersInstalled) {
      if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", ready, false);
        window.addEventListener("load", ready, false);
      } else {
        document.attachEvent("onreadystatechange", readyStateChange);
        window.attachEvent("onload", ready);
      }
      readyEventHandlersInstalled = true;
    }
  }
})("docReady", window);