/**
 * 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 = [],
      path = new URL(window.location.href).pathname;


  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) {
    var lsData = getStateFromLocalStorage();
    lsData[path] = toggles.map(t => {
      return {id: t.index, collapsed: t.collapsed};
    });
    window.localStorage.setItem('showHidesToggles', JSON.stringify(lsData));
  }

  function collapsedStateInLocalStorage(id, fallBack) {
    var lsData = getStateFromLocalStorage();
    if (lsData[path] && lsData[path][id] && lsData[path][id].id === id) {
      return lsData[path][id].collapsed;
    }
    return fallBack;
  }

  function getStateFromLocalStorage() {
    return JSON.parse(window.localStorage.getItem('showHidesToggles')) || {};
  }

  elements.forEach(function(el, i) {
    el.dataset.index = i;
    var coll = collapsedStateInLocalStorage(i, el.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);
  });
});