<script setup lang="ts">
import { Toggle as ShadcnToggle } from '@/components/core/toggle';
import { UiIcon } from '@/components/UiIcon';
import type { UiToggleProps } from './types';

defineOptions({
  name: 'UiToggle',
});

const props = withDefaults(defineProps<UiToggleProps>(), {
  disabled: false,
  variant: 'default',
  size: 'default',
  active: undefined,
  leftIcon: undefined,
  rightIcon: undefined,
});

const modelValue = defineModel<boolean>();

function handleUpdateModelValue(value: boolean) {
  if (props.active !== undefined) return;

  modelValue.value = value;
}
</script>

<template>
  <ShadcnToggle
    :model-value="props.active ?? modelValue"
    :default-value="props.defaultValue"
    :disabled="props.disabled"
    :variant="props.variant"
    :size="props.size"
    @update:model-value="handleUpdateModelValue"
  >
    <slot name="left-icon">
      <UiIcon v-if="props.leftIcon" :name="props.leftIcon" :size="16" />
    </slot>
    <slot />
    <slot name="right-icon">
      <UiIcon v-if="props.rightIcon" :name="props.rightIcon" :size="16" />
    </slot>
  </ShadcnToggle>
</template>
