(function() {
  'use strict';

  var UTIL_NAME = 'showHide';
  var UTIL_SELECTOR = '[uw-show-hide]';

  var JS_INITIALIZED_CLASS = 'js-show-hide-initialized';
  var LOCAL_STORAGE_SHOW_HIDE = 'SHOW_HIDE';
  var SHOW_HIDE_COLLAPSED_CLASS = 'js-show-hide--collapsed';
  var SHOW_HIDE_TARGET_CLASS = 'js-show-hide__target';

  /**
   * <div>
   *   <div uw-show-hide>
   *     [toggle here]
   *   <div>
   *     [content here]
   */
  var util = function(element) {

    function _init() {
      if (!element) {
        throw new Error('ShowHide utility cannot be setup without an element!');
      }

      if (element.classList.contains(JS_INITIALIZED_CLASS)) {
        return false;
      }

      _addEventHandler();
    }

    function _addEventHandler() {
      element.addEventListener('click', function clickListener() {
        console.log('showhide clicked');
        var newState = element.parentElement.classList.toggle(SHOW_HIDE_COLLAPSED_CLASS);
        _updateLSState(element.dataset.shIndex || null, newState);
      });
    }

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

    // function _getCollapsedLSState(index) {
    //   var lsState = _getLocalStorageData();
    //   return lsState[index];
    // }

    function _getLocalStorageData() {
      return JSON.parse(window.localStorage.getItem(LOCAL_STORAGE_SHOW_HIDE)) || {};
    }

    // var showHides = Array.from(scope.querySelectorAll(UTIL_SELECTOR));
    // showHides.forEach(function(el) {
    //   if (el.classList.contains(JS_INITIALIZED_CLASS)) {
    //     return false;
    //   }

    //   var index = el.dataset.shIndex || null;
    //   var isCollapsed = el.dataset.collapsed === 'true';
    //   var lsCollapsedState = _getCollapsedLSState(index);
    //   if (typeof lsCollapsedState !== 'undefined') {
    //     isCollapsed = lsCollapsedState;
    //   }
    //   el.parentElement.classList.toggle(SHOW_HIDE_COLLAPSED_CLASS, isCollapsed);

    //   Array.from(el.parentElement.children).forEach(function(el) {
    //     if (!el.matches(UTIL_SELECTOR)) {
    //       el.classList.add(SHOW_HIDE_TARGET_CLASS);
    //     }
    //   });
    //   el.classList.add(JS_INITIALIZED_CLASS);
    //   _addEventHandler(el);
    // });

    _init();

    return {
      name: UTIL_NAME,
      element: element,
      destroy: function() {},
    };
  };

  if (UtilRegistry) {
    UtilRegistry.register({
      name: UTIL_NAME,
      selector: UTIL_SELECTOR,
      setup: util
    });
  }

})();