/**
 * Simple accordion
 */

/* global getSiblings */

'use strict';

(function () {
  var accordionItems = document.querySelectorAll('.simple-accordion-item');

  if (!accordionItems.length) return;

  var idCounter = 0;

  function expandA11yAccordion(e) {

    // Collapse siblings
    var accordionItemSiblings = getSiblings(this.parentNode);

    for (let i = 0; i < accordionItemSiblings.length; i++) {
      accordionItemSiblings[i].classList.remove('selected');
      accordionItemSiblings[i]
        .querySelector('.simple-accordion-title')
        .setAttribute('aria-expanded', 'false');
      accordionItemSiblings[i]
        .querySelector('.collapsible-content')
        .setAttribute('aria-hidden', 'true');
    }

    // Event delegation
    if (e.target && e.target.matches('button, button *')) {
      // Set selected class on accordion item
      this.parentNode.classList.toggle('selected');

      // Toggle aria-expanded for <button>
      this.children[0].setAttribute(
        'aria-expanded',
        this.children[0].getAttribute('aria-expanded') === 'false'
        ? 'true'
        : 'false'
      );

      // Toggle aria-hidden for collapsibleContent
      this.nextElementSibling.setAttribute(
        'aria-hidden',
        this.nextElementSibling.getAttribute('aria-hidden') === 'false'
        ? 'true'
        : 'false'
      );
    }
  }

  for (let i = 0; i < accordionItems.length; i++) {
    // Cache elements
    var itemHeader = accordionItems[i].querySelector('.simple-accordion-title');
    var collapsibleContent = accordionItems[i].querySelector('.collapsible-content');

    // Unique ID attributes
    var id = 'collapsible-' + idCounter++;

    // Wrap accordion-title content in <button> with unique ID
    var itemHeaderText = itemHeader.innerHTML;
    var itemHeaderButton =
      '<button type="button" aria-controls="' +
      id +
      '"><span>' +
      itemHeaderText +
      '</span></button>';
    itemHeader.innerHTML = itemHeaderButton;

    // Add unique ID to collapsibleContent element
    collapsibleContent.setAttribute('id', id);

    // Add an animation event listener to collapsibleContent
    collapsibleContent.addEventListener('transitionend', function () {
      if (!this.classList.contains('is-open')) {
        this.classList.add('is-open');
      } else {
        this.classList.remove('is-open');
      }
    });

    // Set aria attributes for accordion
    itemHeader.children[0].setAttribute('aria-expanded', 'false');
    itemHeader.nextElementSibling.setAttribute('aria-hidden', 'true');

    // Add event listener for itemHeader
    itemHeader.addEventListener('click', expandA11yAccordion, false);
  }
})();