<template>
  <div class="theme-mode">
    <Button @click="handleThemeMode('Light')" :class="{ active: themeMode === 'Light', disabled: !load }" :title="$t('header.light')">
      <Light />
    </Button>
    <Button @click="handleThemeMode('Dark')" :class="{ active: themeMode === 'Dark', disabled: !load }" :title="$t('header.dark')">
      <Dark />
    </Button>
  </div>
</template>

<script setup>
  import { computed, watch } from 'vue'
  import { useViewerStore } from '@/stores/modules/viewer'

  const useViewer = useViewerStore()

  const themeMode = computed(() => useViewer.getThemeMode)
  const load = computed(() => useViewer.getUpload)

  watch(themeMode, () => {
    const $html = document.documentElement
    $html.classList.toggle('dark')
  })

  const handleThemeMode = (mode) => {
    if (mode === themeMode.value) return
    useViewer.setThemeMode(mode)
  }
</script>

<style lang="scss">
.theme-mode {
  display: flex;
  justify-content: center;
  .button.active {
    color: var(--c-header-text-theme-active);
    background-color: transparent !important;
  }
}
</style>
