<main>
  <figure class="post-card">
<!--     <img src="https://picsum.photos/id/64/1560/1024" /> -->
    <figcaption>The Coldest Sunset</figcaption>
    <p class="text-gray-700 text-base">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
    </p>
  </figure>
  
  <div class="user-toggle">
    <div role="status"></div>
    <button class="toggle-btn">
      <span>Enable</span>
      <span class="toggle-btn__mode">dark</span>
      <span>mode</span>
    </button>
  </div>
</main>

const APP_THEME = 'user-color-scheme'

const toggleButton = document.querySelector('.toggle-btn')
const toggleButtonMode = document.querySelector('.toggle-btn__mode')


const initTheme = () => {
  if (window.matchMedia) {
    const colorSchema  = window.matchMedia('(prefers-color-scheme: dark)')
    
    colorSchema.addListener(e => {
      console.log(e.matches) // Boolean: true/false
      const currentTheme = e.matches ? 'dark' : 'light'
      localStorage.setItem(APP_THEME, currentTheme)
      toggleButtonMode.innerHTML = e.matches ? 'light' : 'dark'
      applyTheme(currentTheme)
    })
    
    // set init theme mode as dark
    localStorage.setItem(APP_THEME, colorSchema.matches ? 'dark' : 'light')
    toggleButtonMode.innerHTML = colorSchema.matches ? 'light' : 'dark'
  }
}

/**
 * if user select the theme, then use the given theme
 */
const applyTheme = givenTheme => {
  let currentTheme = givenTheme || localStorage.getItem(APP_THEME)
  
  if(currentTheme) {
    document.body.setAttribute('data-user-color-scheme', currentTheme)
  }
}

/**
 * get the persistent theme mode, toggle it, then store it.
 */
const toggleTheme = () => {
  let currentTheme = localStorage.getItem(APP_THEME)
  
  switch(currentTheme) {
    case 'light':
      currentTheme = 'dark'
      toggleButtonMode.innerHTML = 'light'
      break
    case 'dark':
      currentTheme = 'light'
      toggleButtonMode.innerHTML = 'dark'
      break
  }

  localStorage.setItem(APP_THEME, currentTheme)
  
  return currentTheme
}

toggleButton.addEventListener('click', e => {
  e.preventDefault()
  
  applyTheme(toggleTheme())
})

initTheme()
applyTheme()