<!-- Step 1: Explain that our component needs HTML structure.  Review the HTML below and highlight the accordion class.  Step 2 is found in the CSS. -->
<section>
  <p>Goal was to create a resusable functional component from the HTML commented out in the JS panel</p>
</section>
<div class="container home">
  <section class="secondary">
    <div class="accordion">

    </div>
  </section>
</div>

/* 

Step 2: Review the LESS syntax below. Explain that CSS is part of what makes a component reusable Note the panel styles for our accordion class.  Note that without JavaScript the panels would always be expanded.  We need to look at our JS for step 3  

*/

* {
  box-sizing: border-box;
}

.container {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}

h1 {
   font-size: 1.5rem;
}

h2 {
  font-size: 1.5rem;
}

p {
  margin: 20px 0;
  line-height: 1.25;
}

.home {
  
  .accordion {
    
    .panel {
      padding: 30px;
      border: 1px solid gray;
      
      .panel-bar {
        display: flex;
        justify-content: space-between;
        
        .panel-buttons {
          
          button {
            cursor: pointer;
          }

          .hide-btn {
            display: none;
          }
        }
      }
      
      .panel-content {
        display: none;
        margin-top: 15px;
      }
      
      .toggle-on {
        display: block;
      }
    }
  }
}

const panelData = [
  {
    title: "First Panel",
    content: "No, no, no. A vigilante is just a man lost in scramble for his own gratification. He can be destroyed or locked up. But if you make yourself more than just a man, if you devote yourself to an idel and if they can't stop you then you become something else entirely. Legend, Mr Wayne."
  },
  {
    title: "Second Panel",
    content: "Tomorrow, you will be released. If you are bored of brawling with thieves and want to achieve something there is a rare blue flower that grows on the eastern slopes. Pick one of these flowers. If you can carry it to the top of the mountain, you may find what you were looking for in the first place."
  }
]

// HTML we removed and turned into a reusable component 👇

/*
      <div class="panel">
        <div class="panel-bar">
          <h3>Title of Panel</h3>
          <div class="panel-buttons">
            <button class="panel-btn-open">Open</button>
            <button class="panel-btn-close hide-btn">Close</button>
          </div>
        </div>
        <div class="panel-content">
          Content of panel
        </div>
      </div>
*/
const accordion = document.querySelector('.accordion')

/*iterate over a list of data creating a new component for each item and attaching that component to the DOM*/
panelData.forEach(data => {
  console.log('creating panel:', data.title)
  accordion.appendChild(createPanel(data.title, data.content))
})
// accordion.appendChild(createPanel('hi rosie', 'best cat award'))

function createPanel(title, content) {
  // define new elements
  const panel = document.createElement('div');
  const panelBar = document.createElement('div');
  const panelTitle = document.createElement('h3');
  const buttonPanel = document.createElement('div');
  const buttonOpen = document.createElement('button');
  const buttonClose = document.createElement('button');
  const panelContent = document.createElement('div');
  
  // Setup structure of elements
  panel.appendChild(panelBar)
  panel.appendChild(panelContent)
  panelBar.appendChild(panelTitle)
  panelBar.appendChild(buttonPanel)
  buttonPanel.appendChild(buttonOpen)
  buttonPanel.appendChild(buttonClose)
  
  // set class names
  panel.classList.add('panel')
  panelBar.classList.add('panel-bar')
  buttonPanel.classList.add('panel-buttons')
  buttonOpen.classList.add('panel-btn-open')
  buttonClose.classList.add('panel-btn-close', 'hide-btn')
  panelContent.classList.add('panel-content')
  
  // set text content
  buttonOpen.textContent = 'Open'
  buttonClose.textContent = 'Close'
  panelContent.textContent = content
  panelTitle.textContent = title
  
  buttonPanel.addEventListener('click', event => {
    console.log('button clicked', event.target)
    // 1. toggle hide-btn on BOTH buttons
    buttonOpen.classList.toggle('hide-btn')
    buttonClose.classList.toggle('hide-btn')
    // 2. Change visibility of the content w/ 'toggle-on'
    panelContent.classList.toggle('toggle-on')
  })
  
  return panel
}