<script>
import theme from "#build/b24ui/switch";
</script>

<script setup>
import { computed, useAttrs, useId } from "vue";
import { Primitive, SwitchRoot, SwitchThumb, Label } from "reka-ui";
import { reactivePick } from "@vueuse/core";
import { useAppConfig } from "#imports";
import { useComponentProps } from "../composables/useComponentProps";
import { useForwardProps } from "../composables/useForwardProps";
import { useFormField } from "../composables/useFormField";
import { tv } from "../utils/tv";
import icons from "../dictionary/icons";
defineOptions({ inheritAttrs: false });
const _props = defineProps({
  as: { type: null, required: false },
  color: { type: null, required: false },
  size: { type: null, required: false },
  highlight: { type: Boolean, required: false },
  loading: { type: Boolean, required: false },
  loadingIcon: { type: [Function, Object], required: false },
  checkedIcon: { type: [Function, Object], required: false },
  uncheckedIcon: { 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 },
  modelValue: { type: null, required: false },
  trueValue: { type: null, required: false },
  falseValue: { type: null, required: false }
});
const slots = defineSlots();
const emits = defineEmits(["change", "update:modelValue"]);
const props = useComponentProps("switch", _props);
const appConfig = useAppConfig();
const rootProps = useForwardProps(reactivePick(props, "required", "value", "defaultValue", "modelValue", "trueValue", "falseValue"), emits);
const { id: _id, emitFormChange, emitFormInput, size: formFieldSize, color: formFieldColor, highlight: formFieldHighlight, name, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props);
const id = _id.value ?? useId();
const size = computed(() => formFieldSize.value ?? props.size);
const color = computed(() => formFieldColor.value ?? props.color);
const highlight = computed(() => formFieldHighlight.value ?? props.highlight);
const disabled = computed(() => formFieldDisabled.value ?? props.disabled);
const attrs = useAttrs();
const forwardedAttrs = computed(() => {
  const { "data-state": _, ...rest } = attrs;
  return rest;
});
const b24ui = computed(() => tv({ extend: theme, ...appConfig.b24ui?.switch || {} })({
  size: size.value,
  color: color.value,
  highlight: highlight.value,
  required: props.required,
  loading: props.loading,
  disabled: disabled.value || props.loading
}));
function onUpdate(value) {
  const event = new Event("change", { target: { value } });
  emits("change", event);
  emitFormChange();
  emitFormInput();
}
</script>

<template>
  <Primitive :as="props.as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
    <div data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
      <SwitchRoot
        :id="id"
        v-bind="{ ...rootProps, ...forwardedAttrs, ...ariaAttrs }"
        :name="name"
        :disabled="disabled || props.loading"
        data-slot="base"
        :class="b24ui.base({ class: props.b24ui?.base })"
        @update:model-value="onUpdate"
      >
        <SwitchThumb data-slot="thumb" :class="b24ui.thumb({ class: props.b24ui?.thumb })">
          <Component
            :is="props.loadingIcon || icons.refresh"
            v-if="props.loading"
            data-slot="icon"
            :class="b24ui.icon({ class: props.b24ui?.icon, checked: true, unchecked: true })"
          />
          <template v-else>
            <Component
              :is="props.checkedIcon"
              v-if="props.checkedIcon"
              data-slot="icon"
              :class="b24ui.icon({ class: props.b24ui?.icon, checked: true })"
            />
            <Component
              :is="props.uncheckedIcon"
              v-if="props.uncheckedIcon"
              data-slot="icon"
              :class="b24ui.icon({ class: props.b24ui?.icon, unchecked: true })"
            />
          </template>
        </SwitchThumb>
      </SwitchRoot>
    </div>
    <div v-if="props.label || !!slots.label || (props.description || !!slots.description)" data-slot="wrapper" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
      <Label v-if="props.label || !!slots.label" :for="id" data-slot="label" :class="b24ui.label({ class: props.b24ui?.label })">
        <slot name="label" :label="props.label">
          {{ props.label }}
        </slot>
      </Label>
      <p v-if="props.description || !!slots.description" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
        <slot name="description" :description="props.description">
          {{ props.description }}
        </slot>
      </p>
    </div>
  </Primitive>
</template>
