<script setup lang="ts">
import { computed, useAttrs } from 'vue';
import { RangeCalendar as ShadcnRangeCalendar } from '@/components/core/range-calendar';
import { cn, omitClass } from '@/lib/utils';
import type { UiRangeCalendarProps } from './types';

defineOptions({
  name: 'UiRangeCalendar',
  inheritAttrs: false,
});

const props = withDefaults(defineProps<UiRangeCalendarProps>(), {
  disabled: false,
  readonly: false,
  locale: 'en',
  weekStartsOn: 0,
  numberOfMonths: 1,
  pagedNavigation: false,
  weekdayFormat: 'narrow',
  fixedWeeks: false,
  preventDeselect: false,
  initialFocus: false,
});

const model = defineModel<UiRangeCalendarProps['modelValue']>();
const placeholder =
  defineModel<UiRangeCalendarProps['placeholder']>('placeholder');

const attrs = useAttrs();
const forwardedAttrs = computed(() => omitClass(attrs));
</script>

<template>
  <ShadcnRangeCalendar
    v-bind="forwardedAttrs"
    v-model="model"
    v-model:placeholder="placeholder"
    :class="
      cn(
        'rounded-md border border-border-surface-default bg-background-surface-floating shadow-md',
        attrs.class ?? '',
      )
    "
    :default-value="props.defaultValue"
    :default-placeholder="props.defaultPlaceholder"
    :min-value="props.minValue"
    :max-value="props.maxValue"
    :disabled="props.disabled"
    :readonly="props.readonly"
    :locale="props.locale"
    :week-starts-on="props.weekStartsOn"
    :number-of-months="props.numberOfMonths"
    :paged-navigation="props.pagedNavigation"
    :weekday-format="props.weekdayFormat"
    :fixed-weeks="props.fixedWeeks"
    :prevent-deselect="props.preventDeselect"
    :calendar-label="props.calendarLabel"
    :initial-focus="props.initialFocus"
    :is-date-disabled="props.isDateDisabled"
    :is-date-unavailable="props.isDateUnavailable"
    :next-page="props.nextPage"
    :prev-page="props.prevPage"
  />
</template>
