<script setup lang="ts">
import { ref } from "vue";
import { useTheme } from "vuetify";
import { useCustomizerStore } from "@/stores/customizer";
import { Icon } from "@iconify/vue";
import { useNuxtApp } from "#app";
// import vuetify from '~/plugins/vuetify';

const theme = useTheme();
const customizer = useCustomizerStore();

// themes color options
const themeColors = ref([
  {
    name: "BLUE_THEME",
    bg: "togglethemeBlue",
  },
  {
    name: "DARK_BLUE_THEME",
    bg: "togglethemeDarkBlue",
  },
]);
console.log("Masuk theme")
const vuetify = useNuxtApp().$vuetify;
// const selectTheme = ref();
const selectTheme = () => {
  if (customizer.actTheme == "BLUE_THEME")
    customizer.SET_THEME(themeColors.value[1].name);
  else customizer.SET_THEME(themeColors.value[0].name);

  // vuetify.theme.dark = customizer.actTheme == 'DARK_BLUE_THEME'
  vuetify.theme.global.name.value = customizer.actTheme;
  console.log("customizer.actTheme", vuetify.theme.global.name);
};
</script>

<template>
  <!-- <div class="position-relative">
        <v-item-group mandatory v-model="customizer.actTheme" class="d-flex">
            <div v-for="theme in themeColors" :key="theme.name">
                <v-item  v-slot="{toggle }" :value="theme.name">
                    <v-sheet rounded="circle" class="cursor-pointer text-center hover-btns" elevation="0" @click="toggle">
                        <v-btn icon :class="theme.bg" class="custom-hover-primary" size="small" variant="text" color="primary" >
                          <Icon v-if="theme.bg == 'togglethemeBlue'" icon="solar:sun-2-line-duotone" :class="theme.bg" height="22"  />
                          <Icon v-if="theme.bg == 'togglethemeDarkBlue'" icon="solar:moon-line-duotone" :class="theme.bg" height="22"  />
                        </v-btn>
                    </v-sheet>
                </v-item>
            </div>
        </v-item-group>
    </div> -->
  <!-- <div class="position-relative"> -->
  <v-btn
    icon
    :class="theme.bg"
    class="custom-hover-primary"
    size="small"
    variant="text"
    color="primary"
    v-model="customizer.actTheme"
    @click="selectTheme"
  >
    <Icon
      v-if="customizer.actTheme == 'BLUE_THEME'"
      icon="solar:sun-2-line-duotone"
      :class="themeColors[0].bg"
      height="22"
    />
    <Icon
      v-if="customizer.actTheme == 'DARK_BLUE_THEME'"
      icon="solar:moon-line-duotone"
      :class="themeColors[1].bg"
      height="22"
    />
  </v-btn>
  <!-- </div> -->
</template>
