<script setup lang="ts">
import AToggle from "#adata-ui/components/forms/toggle/AToggle.vue";
import Sun from "#adata-ui/icons/sun.vue";
import Moon from "#adata-ui/icons/moon.vue";

const colorMode = useColorMode()
const setColorMode = useCookie('colorMode')

if (setColorMode.value) {
  colorMode.preference = setColorMode.value
}

const mode = computed({
  get() {
    return colorMode.value === 'dark'
  },
  set() {
    const value = colorMode.value === 'dark' ? 'light' : 'dark'
    const hostname = location.hostname.split('.').reverse()
    const maxAge = 60 * 60 * 24 * 365 // 1 год

    colorMode.preference = value
    document.cookie = `colorMode=${value}; max-age=${maxAge}; domain=.${hostname[1]}.${hostname[0]}; path=/`
  }
})

onMounted(() => {
  window.addEventListener('storage', (event) => {
    if (event.key === 'nuxt-color-mode') {
      colorMode.preference = event.newValue;
    }
  });
})
</script>

<template>
  <client-only>
    <a-toggle
      v-model="mode"
      size="2xl"
      active-class="dark:bg-gray-800"
      :off-icon="Sun"
      off-icon-class="w-4 h-4"
      on-icon-class="w-4 h-4"
      :on-icon="Moon"
      active-container-class="dark:bg-black"
    />
  </client-only>
</template>


<style>
</style>
