(function () {
  'use strict';

  const create = ({ contentRoot, bodyClass, hostClass, hostDataAttribute, drawerDataAttribute, backdropSelector, backMarkup, historyKey }) => {
    let host = null;
    let drawer = null;
    let trigger = null;
    let open = false;

    const restore = () => {
      if (host && host.parentNode) {
        const mobileDrawer = host.querySelector('[' + drawerDataAttribute + ']');
        if (mobileDrawer) {
          contentRoot.appendChild(mobileDrawer);
          mobileDrawer.removeAttribute(drawerDataAttribute);
          mobileDrawer.dataset.open = 'false';
          mobileDrawer.setAttribute('aria-hidden', 'true');
        }
        host.parentNode.removeChild(host);
      }

      if (trigger) {
        trigger.setAttribute('aria-expanded', 'false');
      }
      const backdrops = backdropSelector
        ? [contentRoot.querySelector(backdropSelector)].filter(Boolean)
        : Array.from(contentRoot.querySelectorAll('.sg-card-list-page-drawer-backdrop'));
      backdrops.forEach((backdrop) => {
        backdrop.dataset.open = 'false';
        backdrop.setAttribute('aria-hidden', 'true');
      });

      host = null;
      drawer = null;
      trigger = null;
      open = false;
      document.body.classList.remove(bodyClass);
      document.body.classList.remove('sg-card-list-page-drawer-open');
    };

    const mount = (sourceDrawer, detailTrigger, existingHost = null) => {
      restore();
      if (!sourceDrawer) {
        return null;
      }

      host = existingHost || document.createElement('div');
      host.className = hostClass;
      host.setAttribute(hostDataAttribute, 'true');
      if (!existingHost) {
        host.innerHTML = backMarkup;
      }
      drawer = sourceDrawer;
      trigger = detailTrigger;
      drawer.setAttribute(drawerDataAttribute, 'true');
      drawer.dataset.open = 'true';
      drawer.setAttribute('aria-hidden', 'false');
      host.appendChild(drawer);
      document.body.appendChild(host);
      document.body.classList.add(bodyClass);
      open = true;

      if (historyKey) {
        window.history.pushState({ ...(window.history.state || {}), [historyKey]: 'detail' }, '', window.location.href);
      }

      return { host, drawer, trigger: detailTrigger };
    };

    const close = () => {
      if (!open) {
        return;
      }
      if (window.history.state && window.history.state[historyKey] === 'detail') {
        window.history.back();
        return;
      }
      restore();
    };

    return { mount, restore, close, isOpen: () => open, getHost: () => host, getDrawer: () => drawer };
  };

  window.SharedMobileDetail = { create };
}());