<script setup>
import { Icon } from "@iconify/vue";
import { MonthRangePicker } from "reka-ui/namespaced";
import { useI18n } from "vue-i18n";
import { cn } from "../../../utils/cn";
defineOptions({ name: "UiDateRangePickerMonthPanel" });
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>
  <MonthRangePicker.Root
    v-slot="{ grid }"
    data-slot="date-range-picker-month-panel"
    :class="cn('p-3', props.class)"
    :model-value="props.modelValue"
    :default-placeholder="props.modelValue?.start"
    :is-month-disabled="props.isDateDisabled"
    :locale="locale"
    @update:model-value="handleUpdate"
  >
    <MonthRangePicker.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">
        <MonthRangePicker.Prev>
          <Icon icon="lucide:chevron-left" />
        </MonthRangePicker.Prev>
        <MonthRangePicker.Next>
          <Icon icon="lucide:chevron-right" />
        </MonthRangePicker.Next>
      </nav>
      <MonthRangePicker.Heading class="text-sm font-medium text-center w-full" />
    </MonthRangePicker.Header>

    <MonthRangePicker.Grid class="mt-4 w-full">
      <MonthRangePicker.GridBody>
        <MonthRangePicker.GridRow
          v-for="(row, rIdx) in grid.rows"
          :key="`mrow-${rIdx}`"
          class="grid grid-cols-4 gap-1 mb-1 last:mb-0"
        >
          <MonthRangePicker.Cell
            v-for="month in row"
            :key="month.toString()"
            :date="month"
          >
            <MonthRangePicker.CellTrigger
              v-slot="{ monthValue, disabled, selected, selectionStart, selectionEnd, highlighted }"
              :month="month"
              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' : ''
)"
              >
                {{ monthValue }}
              </span>
            </MonthRangePicker.CellTrigger>
          </MonthRangePicker.Cell>
        </MonthRangePicker.GridRow>
      </MonthRangePicker.GridBody>
    </MonthRangePicker.Grid>
  </MonthRangePicker.Root>
</template>
