<script setup lang="ts">
import { useTheme } from 'vuetify'
import { $cookie } from '@/plugins/cookie'
import { onBeforeMount } from 'vue';
import { COOKIE_THEME } from '../constants/static';

const theme = useTheme()
const key = COOKIE_THEME

const get = (): string => {
  return $cookie.get(key);
}
const set = (value: string): void => {
  theme.global.name.value = value;
  $cookie.set(key, value);
}
const toggle = (): void => {
  const t = theme.global.current?.value?.dark ? 'light' : 'dark'
  theme.global.name.value = t
  $cookie.set(key, t);
}
const setThemeFromExistCookie = (): void => {
  const v = get()
  if (v?.length && typeof v === 'string') {
    set(v)
  }
}
onBeforeMount(setThemeFromExistCookie)
</script>

<template>
  <v-btn icon density="comfortable" @click="toggle">
    <span class="mso">routine</span>
  </v-btn>
</template>