/**
 * div
 *   div.js-show-hide__toggle
 *     toggle here
 *   div
 *     content here
 */

document.addEventListener('setup', function(e) {
  if (e.detail.module && e.detail.module !== 'showHide')
    return;

  var LSNAME = 'SHOW_HIDE';

  function addEventHandler(el) {
    el.addEventListener('click', function elClickListener() {
      var newState = el.parentElement.classList.toggle('js-show-hide--collapsed');
      updateLSState(el.dataset.shIndex || null, newState);
    });
  }

  function updateLSState(index, state) {
    if (!index) {
      return false;
    }
    var lsData = fromLocalStorage();
    lsData[index] = state;
    window.localStorage.setItem(LSNAME, JSON.stringify(lsData));
  }

  function collapsedStateInLocalStorage(index) {
    return fromLocalStorage()[index] || null;
  }

  function fromLocalStorage() {
    return JSON.parse(window.localStorage.getItem(LSNAME)) || {};
  }

  Array
    .from(e.detail.scope.querySelectorAll('.js-show-hide__toggle'))
    .forEach(function(el) {
      var index = el.dataset.shIndex || null;
      el.parentElement.classList.toggle(
        'js-show-hide--collapsed',
        collapsedStateInLocalStorage(index) || el.dataset.collapsed === 'true'
      );
      Array.from(el.parentElement.children).forEach(function(el) {
        if (!el.classList.contains('js-show-hide__toggle')) {
          el.classList.add('js-show-hide__target');
        }
      });
      addEventHandler(el);
  });
});

document.addEventListener('DOMContentLoaded', function() {
  document.dispatchEvent(new CustomEvent('setup', { detail: { scope: document.body, module: 'showHide' }, bubbles: true, cancelable: true }))
});