<script setup lang="ts">
import { useThemeConfig } from '@core/composable/useThemeConfig';
import type { ThemeSwitcherTheme } from '@layouts/types';
import { Icon } from '@iconify/vue';
import { onMounted, watch } from 'vue';

const props = defineProps<{
  themes: ThemeSwitcherTheme[];
}>();

const { theme } = useThemeConfig();
const {
  state: currentThemeName,
  next: getNextThemeName,
  index: currentThemeIndex,
} = useCycleList(
  props.themes.map((t) => t.name),
  { initialValue: theme.value }
);

const changeTheme = () => {
  theme.value = getNextThemeName();
};

const changeMode = (val: 'dark' | 'light' | 'system') => {
  let value = val;
  if (
    theme.value === 'system' &&
    window.matchMedia('(prefers-color-scheme: dark)').matches
  ) {
    value = 'dark';
  }
  if (value === 'dark') {
    document.documentElement.classList.add('dark');
    document.documentElement.classList.remove('light');
  } else {
    document.documentElement.classList.add('light');
    document.documentElement.classList.remove('dark');
  }
  document.documentElement.setAttribute('data-theme', value);
};
// Update icon if theme is changed from other sources
watch(theme, (val: 'dark' | 'light' | 'system') => {
  currentThemeName.value = val;
  changeMode(val);
});

onMounted(() => {
  if (currentThemeName.value) {
    changeMode(currentThemeName.value);
  }
});
</script>

<template>
  <div class="tooltip tooltip-bottom delay-1000" :data-tip="currentThemeName">
    <button class="btn btn-ghost btn-circle btn-sm mx-1" @click="changeTheme">
      <Icon :icon="props.themes[currentThemeIndex].icon" class="text-2xl" />
    </button>
  </div>
</template>
