<script setup>
import { ref, computed } from 'vue'

import IconMoonStars from './icons/IconMoonStars.vue'
import IconSun from './icons/IconSun.vue'

const theme_icons = {
  'light': IconSun,
  'dark': IconMoonStars,
}

let storedTheme = localStorage.getItem('theme')
if (!storedTheme) {
  storedTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}

const currentTheme = ref(storedTheme)
document.documentElement.setAttribute('data-bs-theme', storedTheme)

async function click(ev) {
  ev.preventDefault()

  let newTheme = 'light'
  if (currentTheme.value == 'light') {
    newTheme = 'dark'
  }

  currentTheme.value = newTheme
  document.documentElement.setAttribute('data-bs-theme', newTheme)
  localStorage.setItem('theme', newTheme)
}

const currentIcon = computed(() => theme_icons[currentTheme.value])

</script>

<template>
  <button type="button" @click="click" class="btn btn-primary align-items-center py-2">
    <component :is="currentIcon" />
  </button>
</template>

