<script setup>
import { Icon } from "@iconify/vue";
import { YearRangePicker } from "reka-ui/namespaced";
import { useI18n } from "vue-i18n";
import { cn } from "../../../utils/cn";
defineOptions({ name: "UiDateRangePickerYearPanel" });
const props = defineProps({
  modelValue: { type: Object, required: false },
  isDateDisabled: { type: Function, required: false },
  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true }
});
const emits = defineEmits(["update:modelValue"]);
const { locale } = useI18n({ useScope: "global", inheritLocale: true });
function handleUpdate(value) {
  emits("update:modelValue", value);
}
</script>

<template>
  <YearRangePicker.Root
    v-slot="{ grid }"
    data-slot="date-range-picker-year-panel"
    :class="cn('p-3', props.class)"
    :model-value="props.modelValue"
    :default-placeholder="props.modelValue?.start"
    :is-year-disabled="props.isDateDisabled"
    :locale="locale"
    @update:model-value="handleUpdate"
  >
    <YearRangePicker.Header class="pt-2 pb-2 relative">
      <nav class="w-full flex items-center gap-1 absolute top-1/2 -translate-y-1/2 transform-gpu inset-x-0 justify-between z-10">
        <YearRangePicker.Prev>
          <Icon icon="lucide:chevron-left" />
        </YearRangePicker.Prev>
        <YearRangePicker.Next>
          <Icon icon="lucide:chevron-right" />
        </YearRangePicker.Next>
      </nav>
      <YearRangePicker.Heading class="text-sm font-medium text-center w-full" />
    </YearRangePicker.Header>

    <YearRangePicker.Grid class="mt-4 w-full">
      <YearRangePicker.GridBody>
        <YearRangePicker.GridRow
          v-for="(row, rIdx) in grid.rows"
          :key="`yrow-${rIdx}`"
          class="grid grid-cols-4 gap-1 mb-1 last:mb-0"
        >
          <YearRangePicker.Cell
            v-for="year in row"
            :key="year.toString()"
            :date="year"
          >
            <YearRangePicker.CellTrigger
              v-slot="{ yearValue, disabled, selected, selectionStart, selectionEnd, highlighted }"
              :year="year"
              class="block w-full"
            >
              <span
                :class="cn(
  'flex h-9 w-full items-center justify-center rounded-md text-sm font-normal cursor-pointer',
  'hover:bg-zinc-100',
  selected || selectionStart || selectionEnd ? 'bg-(--primary) text-white hover:bg-(--primary)' : '',
  highlighted && !selected ? 'bg-[color-mix(in_srgb,var(--primary)_20%,white)] text-(--primary) hover:bg-[color-mix(in_srgb,var(--primary)_25%,white)]' : '',
  disabled ? 'text-zinc-400 opacity-50 cursor-default' : ''
)"
              >
                {{ yearValue }}
              </span>
            </YearRangePicker.CellTrigger>
          </YearRangePicker.Cell>
        </YearRangePicker.GridRow>
      </YearRangePicker.GridBody>
    </YearRangePicker.Grid>
  </YearRangePicker.Root>
</template>
