<script setup>
import { computed, ref, watch } from "vue";
import {
  format,
  startOfMonth,
  endOfMonth,
  startOfWeek,
  endOfWeek,
  eachDayOfInterval,
  isSameMonth,
  isToday,
  isSameDay,
  addMonths,
  subMonths,
  isSameWeek
} from "date-fns";
const props = defineProps({
  currentWeekStart: { type: Date, required: false }
});
const selectedDate = defineModel({ type: Date, ...{ default: () => /* @__PURE__ */ new Date() } });
const viewDate = ref(new Date(selectedDate.value));
watch(() => selectedDate.value, (newDate) => {
  viewDate.value = new Date(newDate);
});
const calendarDays = computed(() => {
  const monthStart = startOfMonth(viewDate.value);
  const monthEnd = endOfMonth(viewDate.value);
  const calendarStart = startOfWeek(monthStart, { weekStartsOn: 1 });
  const calendarEnd = endOfWeek(monthEnd, { weekStartsOn: 1 });
  const days = eachDayOfInterval({ start: calendarStart, end: calendarEnd });
  return days.map((date) => ({
    date,
    day: date.getDate(),
    isCurrentMonth: isSameMonth(date, viewDate.value),
    isToday: isToday(date),
    isSelected: selectedDate.value ? isSameDay(date, selectedDate.value) : false,
    isInSelectedWeek: isSameWeek(date, selectedDate.value || /* @__PURE__ */ new Date(), { weekStartsOn: 1 })
  }));
});
const monthYear = computed(() => format(viewDate.value, "MMMM yyyy"));
function nextMonth() {
  viewDate.value = addMonths(viewDate.value, 1);
}
function prevMonth() {
  viewDate.value = subMonths(viewDate.value, 1);
}
function selectDate(date) {
  selectedDate.value = date;
}
</script>

<template>
  <div class="flex flex-col gap-4">
    <div class="flex items-center justify-between px-1">
      <span class="font-medium text-default text-sm">{{ monthYear }}</span>
      <div class="flex gap-1">
        <UButton
          icon="i-lucide-chevron-left"
          color="neutral"
          variant="ghost"
          size="xs"
          class="rounded-full"
          @click="prevMonth"
        />
        <UButton
          icon="i-lucide-chevron-right"
          color="neutral"
          variant="ghost"
          size="xs"
          class="rounded-full"
          @click="nextMonth"
        />
      </div>
    </div>
    <div class="grid grid-cols-7 text-center text-xs gap-y-0.5">
      <div
        v-for="day in ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']"
        :key="day"
        class="text-dimmed font-medium h-8 flex items-center justify-center"
      >
        {{ day }}
      </div>

      <div
        v-for="(dateObj, index) in calendarDays"
        :key="index"
        class="h-8 flex flex-col items-center justify-center transition-colors relative cursor-pointer select-none"
        :class="{
  'bg-primary text-inverted font-semibold rounded-lg z-10': dateObj.isSelected,
  'bg-default text-default font-semibold': !dateObj.isSelected && dateObj.isInSelectedWeek,
  'rounded-l-lg': !dateObj.isSelected && dateObj.isInSelectedWeek && index % 7 === 0,
  'rounded-r-lg': !dateObj.isSelected && dateObj.isInSelectedWeek && index % 7 === 6,
  'text-highlighted hover:bg-accented rounded-lg': dateObj.isCurrentMonth && !dateObj.isSelected && !dateObj.isInSelectedWeek,
  'text-muted hover:bg-elevated rounded-lg': !dateObj.isCurrentMonth && !dateObj.isSelected && !dateObj.isInSelectedWeek
}"
        @click="selectDate(dateObj.date)"
      >
        <span>{{ dateObj.day }}</span>
        <span
          v-if="dateObj.isToday"
          class="w-2.5 h-0.5 bg-primary rounded-full absolute bottom-0"
        />
      </div>
    </div>
  </div>
</template>
