<script setup lang="ts" generic="T extends 'single' | 'multiple'">
import { ToggleGroup as ShadcnToggleGroup } from '@/components/core/toggle-group';
import type { UiToggleGroupBaseProps, UiToggleGroupModelValue } from './types';

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

const props = withDefaults(
  defineProps<
    UiToggleGroupBaseProps & {
      /**
       * The selection mode.
       * - `'single'`   → only one item selected; `v-model` is `string`
       * - `'multiple'` → many items selected;    `v-model` is `string[]`
       */
      type: T;
      /**
       * The default value when initially rendered (uncontrolled mode).
       */
      // eslint-disable-next-line vue/require-default-prop
      defaultValue?: UiToggleGroupModelValue<T>;
    }
  >(),
  {
    disabled: false,
    variant: 'default',
    size: 'default',
    loop: true,
    rovingFocus: true,
    orientation: 'horizontal',
  },
);

const modelValue = defineModel<UiToggleGroupModelValue<T>>();
</script>

<template>
  <ShadcnToggleGroup
    v-model="modelValue"
    :type="props.type"
    :default-value="props.defaultValue"
    :disabled="props.disabled"
    :variant="props.variant"
    :size="props.size"
    :loop="props.loop"
    :roving-focus="props.rovingFocus"
    :orientation="props.orientation"
  >
    <slot />
  </ShadcnToggleGroup>
</template>
