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

document.addEventListener('DOMContentLoaded', function() {

  var elements = Array.from(document.querySelectorAll('.js-show-hide__toggle')),
      toggles = [];

  function addEventHandler(el) {
    el.addEventListener('click', function elClickListener() {
      var toggle = toggles[el.dataset.index];
      toggle.collapsed = !toggle.collapsed;
      toggle.parent.classList.toggle('js-show-hide--collapsed', toggle.collapsed);
      updateLocalStorage();
    });
  }

  function updateLocalStorage(id) {
    let jsonToggles = JSON.stringify(toggles.map(t => {
      return {id: t.index, collapsed: t.collapsed};
    }));
    window.localStorage.setItem('showHidesToggles', jsonToggles);
  }

  function collapsedStateInLocalStorage(id, fallBack) {
    let lsData = JSON.parse(window.localStorage.getItem('showHidesToggles'));
    if (lsData[id]) {
      return lsData[id].collapsed;
    }
    return fallBack;
  }

  elements.forEach(function(el, i) {
    el.dataset.index = i;
    var coll = collapsedStateInLocalStorage(i, el.parentElement.dataset.collapsed === 'true');
    if (coll) {
      el.parentElement.classList.add('js-show-hide--collapsed')
    }
    Array.from(el.parentElement.children).forEach(function(el) {
      if (!el.classList.contains('js-show-hide__toggle')) {
        el.classList.add('js-show-hide__target');
      }
    });
    toggles.push({index: i, collapsed: coll, parent: el.parentElement});
    addEventHandler(el);
  });
});