// Base styles
body {
  margin: 0;
  padding: 2rem;
  font-size: 1.5rem;
  font-family: sans-serif;
}


//-----------------
// Disclosure styles

.disclosure {
  border: 1px solid #ccc;
  padding: 10px;
  max-width: 50rem;
}

.disclosure__content {
  margin-top: 10px;
}

.disclosure__icon {
  height: 1em;
  width: 1em;
  fill: currentcolor;
  transition: transform 0.3s ease-out;
}

.disclosure__button {
  background-color: #222;
  padding: 0.25em 0.5em;
  color: #fff;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1ch;
  
  &:focus-visible {
    outline: solid orange 3px;
    outline-offset: 3px;
  }
  
  &[aria-expanded="false"] {
    + .disclosure__content {
      display: none;
    }
  }
  
  &[aria-expanded="true"] {
    + .disclosure__content {
      display: block;
    }
    
    .disclosure__icon {
      transform: rotate(-180deg);
    }
  }
}

/** Technical Requirements
  * 1 * Must do a null check for component's presence on the page
  * 2 * Must update the data-state variable and button attributes on load  
  * 3 * Must toggle aria-expanded boolean on click
  * 4 * No requirement for closing other disclosures in a set when one is open
*/

const disclosures = document.querySelectorAll('.js-disclosure');

function toggleDisclosure() {
  const isExpanded = this.getAttribute('aria-expanded') === 'true';
  this.setAttribute('aria-expanded', !isExpanded);
}

function init() {
  // early return if no disclosures present on page
  if (!disclosures.length) {
    return
  }
  
  // update state not JS has loaded
  disclosures.forEach(component => {
    component.dataset.state = 'ready';
    
    const disclosureButtons = component.querySelectorAll('.js-disclosure-btn');
    
    disclosureButtons.forEach(btn => {
      // initialise button attributes now JS has loaded
      btn.removeAttribute('title');
      btn.removeAttribute('disabled');

      // listen for clicks
      btn.addEventListener('click', toggleDisclosure);
    });
  }); 
  
  
}

document.addEventListener(
  'DOMContentLoaded',
  () => {
    init();
  });