<script setup>
import { computed } from "vue";
import { reactiveOmit } from "@vueuse/core";
import {
  SwitchRoot,
  SwitchThumb,
  useForwardPropsEmits
} from "reka-ui";
import { cn } from "../../../utils/cn";
defineOptions({ name: "UiSwitch" });
const props = defineProps({
  defaultValue: { type: null, required: false },
  modelValue: { type: null, required: false },
  disabled: { type: Boolean, required: false },
  id: { type: String, required: false },
  value: { type: String, required: false },
  trueValue: { type: null, required: false },
  falseValue: { type: null, required: false },
  asChild: { type: Boolean, required: false },
  as: { type: null, required: false },
  name: { type: String, required: false },
  required: { type: Boolean, required: false },
  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
  size: { type: String, required: false, default: "default" }
});
const emits = defineEmits(["update:modelValue"]);
const delegatedProps = reactiveOmit(props, "class", "size");
const forwarded = useForwardPropsEmits(delegatedProps, emits);
const rootSizeClass = computed(
  () => props.size === "sm" ? "h-3.5 w-6" : "h-[1.15rem] w-8"
);
const thumbSizeClass = computed(
  () => props.size === "sm" ? "size-3" : "size-4"
);
</script>

<template>
  <SwitchRoot
    v-slot="slotProps"
    data-slot="switch"
    v-bind="forwarded"
    :class="cn(
  'peer data-[state=checked]:bg-(--primary) data-[state=unchecked]:bg-zinc-200 focus-visible:border-(--primary) inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50',
  rootSizeClass,
  props.class
)"
  >
    <SwitchThumb
      data-slot="switch-thumb"
      :class="cn('bg-zinc-50 pointer-events-none block rounded-full transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0', thumbSizeClass)"
    >
      <slot
        name="thumb"
        v-bind="slotProps"
      />
    </SwitchThumb>
  </SwitchRoot>
</template>
