<script>

</script>

<script setup>
import { computed } from "vue";
import { useForwardProps } from "reka-ui";
import { useColorMode } from "#imports";
import { useLocale } from "../../composables/useLocale";
import icons from "../../dictionary/icons";
import B24Switch from "../Switch.vue";
defineOptions({ inheritAttrs: false });
const props = defineProps({
  as: { type: null, required: false },
  color: { type: null, required: false },
  size: { type: null, required: false },
  loading: { type: Boolean, required: false },
  loadingIcon: { type: [Function, Object], required: false },
  label: { type: String, required: false },
  description: { type: String, required: false },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false },
  disabled: { type: Boolean, required: false },
  id: { type: String, required: false },
  name: { type: String, required: false },
  required: { type: Boolean, required: false },
  value: { type: String, required: false },
  defaultValue: { type: null, required: false },
  trueValue: { type: null, required: false },
  falseValue: { type: null, required: false }
});
const { t } = useLocale();
const colorMode = useColorMode();
const switchProps = useForwardProps(props);
const isDark = computed({
  get() {
    return colorMode.value === "dark";
  },
  set(_isDark) {
    colorMode.preference = _isDark ? "dark" : "light";
  }
});
</script>

<template>
  <ClientOnly v-if="!colorMode?.forced">
    <B24Switch
      v-model="isDark"
      :checked-icon="icons.dark"
      :unchecked-icon="icons.light"
      v-bind="{
  ...switchProps,
  'aria-label': isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark'),
  ...$attrs
}"
    />

    <template #fallback>
      <B24Switch
        :checked-icon="icons.dark"
        :unchecked-icon="icons.light"
        v-bind="{
  ...switchProps,
  'aria-label': isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark'),
  ...$attrs
}"
        disabled
      />
    </template>
  </ClientOnly>
</template>
