<script setup lang="ts">
import type { CalendarRootEmits, CalendarRootProps } from "reka-ui";
import type { HTMLAttributes } from "vue";
import { reactiveOmit } from "@vueuse/core";
import { CalendarRoot, useForwardPropsEmits } from "reka-ui";
import CalendarCell from "@/components/ui/calendar/CalendarCell.vue";
import CalendarCellTrigger from "@/components/ui/calendar/CalendarCellTrigger.vue";
import CalendarGrid from "@/components/ui/calendar/CalendarGrid.vue";
import CalendarGridBody from "@/components/ui/calendar/CalendarGridBody.vue";
import CalendarGridHead from "@/components/ui/calendar/CalendarGridHead.vue";
import CalendarGridRow from "@/components/ui/calendar/CalendarGridRow.vue";
import CalendarHeadCell from "@/components/ui/calendar/CalendarHeadCell.vue";
import CalendarHeader from "@/components/ui/calendar/CalendarHeader.vue";
import CalendarHeading from "@/components/ui/calendar/CalendarHeading.vue";
import CalendarNextButton from "@/components/ui/calendar/CalendarNextButton.vue";
import CalendarPrevButton from "@/components/ui/calendar/CalendarPrevButton.vue";
import { cn } from "@/lib/utils";

interface Props extends CalendarRootProps {
  class?: HTMLAttributes["class"];
}

const props = defineProps<Props>();
const emits = defineEmits<CalendarRootEmits>();

const delegatedProps = reactiveOmit(props, "class");
const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>

<template>
  <CalendarRoot
    data-slot="calendar"
    v-bind="forwarded"
    v-slot="{ grid, weekDays }"
    :class="cn('p-3', props.class)"
  >
    <CalendarHeader>
      <CalendarPrevButton />
      <CalendarHeading />
      <CalendarNextButton />
    </CalendarHeader>
    <div class="mt-4 flex flex-col gap-y-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
      <template v-for="month in grid" :key="month.value.toString()">
        <CalendarGrid>
          <CalendarGridHead>
            <CalendarGridRow class="flex">
              <CalendarHeadCell v-for="day in weekDays" :key="day">
                {{ day }}
              </CalendarHeadCell>
            </CalendarGridRow>
          </CalendarGridHead>
          <CalendarGridBody>
            <CalendarGridRow
              v-for="(weekDates, index) in month.rows"
              :key="index"
              class="flex w-full mt-2"
            >
              <CalendarCell
                v-for="weekDate in weekDates"
                :key="weekDate.toString()"
                :date="weekDate"
              >
                <CalendarCellTrigger :day="weekDate" :month="month.value" />
              </CalendarCell>
            </CalendarGridRow>
          </CalendarGridBody>
        </CalendarGrid>
      </template>
    </div>
  </CalendarRoot>
</template>
