<script>

</script>

<script setup>
import { computed } from "vue";
import { useForwardProps } from "reka-ui";
import { reactiveOmit } from "@vueuse/core";
import { useColorMode } from "#imports";
import { useLocale } from "../../composables/useLocale";
import icons from "../../dictionary/icons";
import B24Button from "../Button.vue";
defineOptions({ inheritAttrs: false });
const props = defineProps({
  color: { type: null, required: false, default: "air-tertiary-no-accent" },
  label: { type: String, required: false },
  activeColor: { type: null, required: false },
  depth: { type: null, required: false },
  activeDepth: { type: null, required: false },
  size: { type: null, required: false },
  rounded: { type: Boolean, required: false },
  block: { type: Boolean, required: false },
  loadingAuto: { type: Boolean, required: false },
  normalCase: { type: Boolean, required: false },
  useWait: { type: Boolean, required: false },
  useClock: { type: Boolean, required: false },
  useDropdown: { type: Boolean, required: false },
  onClick: { type: [Function, Array], required: false },
  class: { type: null, required: false },
  activeClass: { type: String, required: false },
  inactiveClass: { type: String, required: false },
  b24ui: { type: null, required: false },
  icon: { type: [Function, Object], required: false },
  avatar: { type: Object, required: false },
  loading: { type: Boolean, required: false },
  as: { type: null, required: false },
  type: { type: null, required: false },
  disabled: { type: Boolean, required: false },
  active: { type: Boolean, required: false },
  exact: { type: Boolean, required: false },
  exactQuery: { type: [Boolean, String], required: false },
  exactHash: { type: Boolean, required: false },
  isAction: { type: Boolean, required: false },
  to: { type: null, required: false },
  href: { type: null, required: false },
  external: { type: Boolean, required: false },
  target: { type: [String, Object, null], required: false },
  rel: { type: [String, Object, null], required: false },
  noRel: { type: Boolean, required: false },
  prefetchedClass: { type: String, required: false },
  prefetch: { type: Boolean, required: false },
  prefetchOn: { type: [String, Object], required: false },
  noPrefetch: { type: Boolean, required: false },
  trailingSlash: { type: String, required: false },
  exactActiveClass: { type: String, required: false },
  ariaCurrentValue: { type: String, required: false },
  viewTransition: { type: Boolean, required: false },
  replace: { type: Boolean, required: false }
});
const { t } = useLocale();
const colorMode = useColorMode();
const buttonProps = useForwardProps(reactiveOmit(props, "icon"));
const isDark = computed({
  get() {
    return colorMode.value === "dark";
  },
  set(_isDark) {
    colorMode.preference = _isDark ? "dark" : "light";
  }
});
</script>

<template>
  <B24Button
    v-bind="{
  ...buttonProps,
  'aria-label': isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark'),
  ...$attrs
}"
    @click="isDark = !isDark"
  >
    <template #leading="{ b24ui }">
      <Component :is="icons.dark" data-slot="leadingIcon" :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })" class="hidden dark:inline" />
      <Component :is="icons.light" data-slot="leadingIcon" :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })" class="inline dark:hidden" />
    </template>
  </B24Button>
</template>
