text: import data from './../data/audio.json' assert { type: 'json' };
  import infoPageContent from './../data/infoPage.json' assert { type: 'json' };
  
  // menu items
  const infoMenuItem = document.getElementById('info');
  const watchMenuItem = document.getElementById('watch');
  const exploreMenuItem = document.getElementById('explore');
  
  function transitionPage() {
    document.getElementById('transition').classList.add('anim-trans');
  
    setTimeout(() => {
      main.innerHTML = '';
    }, 1500);
  
    setTimeout(() => {
      document.getElementById('transition').classList.remove('anim-trans');
    }, 3000);
  }
  
  function handleClickInfo() {
    transitionPage();
  
    setTimeout(() => {
      if (document.getElementById('watch').classList.contains('active')
      || document.getElementById('explore').classList.contains('active')) {
        document.getElementById('watch').classList.remove('active');
        document.getElementById('explore').classList.remove('active');
      }
    
      document.getElementById('info').classList.add('active');
    
      const content = JSON.parse(JSON.stringify(infoPageContent));
      for (const [key, value] of Object.entries(content)) {
        console.log('field', key, value);
        main.innerHTML += `<div class=${value.class}>${value.value}</div>`;
      };
    }, 2000);
  }
  
  function handleClickWatch() {
    transitionPage();
  
    setTimeout(() => {
      if (document.getElementById('info').classList.contains('active')) {
        document.getElementById('info').classList.remove('active');
      }
    
      if (document.getElementById('explore').classList.contains('active')) {
        document.getElementById('explore').classList.remove('active');
      }
    
      console.log('add class to explore menu item');
      document.getElementById('watch').classList.add('active');
    
      // todo add video
      console.log('add video to watch project');
    }, 2000);
  }
  
  function handleClickExplore() {
    transitionPage();
  
    setTimeout(() => {
      if (document.getElementById('info').classList.contains('active')) {
        document.getElementById('info').classList.remove('active');
      }
    
      if (document.getElementById('watch').classList.contains('active')) {
        document.getElementById('watch').classList.remove('active');
      }
    
      console.log('add class to explore menu item');
      document.getElementById('explore').classList.add('active');
    
      for (let i = 1; i <= Object.keys(data).length; i++) {
        main.innerHTML += `
          <div class="audio-item">
            <audio
            id="${data[i].audio.id}-audio"
            preload="metadata"
            style="width:300px;"
            loop
            >
              <source src="${data[i].audio.source.src}" type="audio/mpeg">
              Your browser does not support the audio element.
            </audio>
            <br />
            
            <input
            id="${data[i].audio.id}-volume"
            class="volume-toggle"
            max="1000"
            min="0"
            type="range"
            value="500"
            />
    
            <div>
              <details close>
                <summary>
                  ${data[i].audio.title}
                </summary>
                <div>
                  ${data[i].audio.description}
                </div>
              </details>
            </div>   
          </div>`;
      }
    
      function handleClick() {
        console.log('begin audio play or stop');
      
        for (let i = 1; i <= Object.keys(data).length; i++) {
          console.log('audio', `${data[i].audio.id}-audio`)
          const audio = document.getElementById(`${data[i].audio.id}-audio`);
          const volume = document.getElementById(`${data[i].audio.id}-volume`);
      
          console.log('paused', audio.paused, 'audio not paused', !audio.pause);
      
          if (audio.paused) {
            console.log('pause');
            audio.play();
            volume.disabled = false;
          } else if (!audio.paused) {
            console.log('play');
            audio.pause();
            volume.disabled = true;
          }
        };
      }
    
      // click event
      handleClick();
    
      // volume change
      document.getElementById('audio_1-volume').addEventListener('change', (event) => {
        const audio = document.getElementById('audio_1-audio');
        audio.volume = event.target.value / 1000;
      });
      document.getElementById('audio_2-volume').addEventListener('change', (event) => {
        const audio = document.getElementById('audio_2-audio');
        audio.volume = event.target.value / 1000;
      });
      document.getElementById('audio_3-volume').addEventListener('change', (event) => {
        const audio = document.getElementById('audio_3-audio');
        audio.volume = event.target.value / 1000;
      });
      document.getElementById('audio_4-volume').addEventListener('change', (event) => {
        const audio = document.getElementById('audio_4-audio');
        audio.volume = event.target.value / 1000;
      });
    }, 2000);
  }
  
  infoMenuItem.addEventListener('click', handleClickInfo );
  watchMenuItem.addEventListener('click', handleClickWatch );
  exploreMenuItem.addEventListener('click', handleClickExplore );
  
  // main
  const main = document.getElementById('main');
  handleClickInfo();