<script setup lang="ts">
import { computed, useAttrs } from 'vue';
import { Calendar as ShadcnCalendar } from '@/components/core/calendar';
import { cn, omitClass } from '@/lib/utils';
import type { UiCalendarProps } from './types';

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

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

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

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

<template>
  <ShadcnCalendar
    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"
    :layout="props.layout"
    :year-range="props.yearRange"
    :prevent-deselect="props.preventDeselect"
    :multiple="props.multiple"
    :calendar-label="props.calendarLabel"
    :initial-focus="props.initialFocus"
    :is-date-disabled="props.isDateDisabled"
    :is-date-unavailable="props.isDateUnavailable"
    :dir="props.dir"
    :next-page="props.nextPage"
    :prev-page="props.prevPage"
    :disable-days-outside-current-view="props.disableDaysOutsideCurrentView"
  >
    <template #calendar-heading="{ date, month, year }">
      <slot name="calendar-heading" :date="date" :month="month" :year="year" />
    </template>
    <template #calendar-prev-icon>
      <slot name="prev-icon" />
    </template>
    <template #calendar-next-icon>
      <slot name="next-icon" />
    </template>
  </ShadcnCalendar>
</template>
