<script setup lang="ts">
import type { ToggleProps as RekaToggleProps } from "reka-ui"
import type { HTMLAttributes } from "vue"
import type { ToggleVariants } from "."
import { Toggle as RekaToggle } from "reka-ui"
import { cn } from "@/lib/utils"
import { toggleVariants } from "."

export interface ToggleProps extends /* @vue-ignore */ Omit<RekaToggleProps, "modelValue" | "defaultValue"> {
  /** Initial pressed state, used when uncontrolled (no v-model:pressed binding). */
  defaultPressed?: boolean
  /** Disable the toggle. */
  disabled?: boolean
  /** Render as the slot's root element (reka-ui Primitive asChild). */
  asChild?: boolean
  /** Render as a different element. Defaults to "button". */
  as?: RekaToggleProps["as"]
  /** Form name for the hidden input. */
  name?: string
  /** Whether the toggle is required when used in a form. */
  required?: boolean
  /** Visual style. */
  variant?: ToggleVariants["variant"]
  /** Toggle size. */
  size?: ToggleVariants["size"]
  /** Additional classes merged via tailwind-merge. */
  class?: HTMLAttributes["class"]
}

const props = defineProps<ToggleProps>()

const pressed = defineModel<boolean>("pressed", { default: undefined })
</script>

<template>
  <RekaToggle
    v-model="pressed"
    :default-value="defaultPressed"
    :disabled="disabled"
    :as-child="asChild"
    :as="as ?? 'button'"
    :name="name"
    :required="required"
    :class="cn(toggleVariants({ variant, size }), props.class)"
  >
    <slot
      :pressed="pressed ?? false"
      :disabled="disabled ?? false"
    />
  </RekaToggle>
</template>
