<script setup>
import { computed } from "vue";
import { isSameDay } from "date-fns";
import { useCalendarSlotHeight } from "../../../composables/useCalendarSlotHeight";
const { hourHeightPx, getEventTop, getEventHeight } = useCalendarSlotHeight();
const props = defineProps({
  day: { type: Object, required: true },
  dayIndex: { type: Number, required: true },
  allEvents: { type: Array, required: true },
  currentTimeIndicator: { type: Object, required: true },
  allTeamMembers: { type: Array, required: true }
});
function getEventTeamMember(event) {
  if (!event.teamMemberId) return void 0;
  return props.allTeamMembers.find((m) => m.id === event.teamMemberId);
}
const emit = defineEmits(["gridClick", "eventResizeStart", "editEvent", "eventMoveStart"]);
function toMinutes(time) {
  const [h, m] = time.split(":").map(Number);
  return h * 60 + m;
}
function getPositionedEvents(dayEvents) {
  const sorted = [...dayEvents].sort((a, b) => a.startTime.localeCompare(b.startTime));
  const groups = [];
  let lastEvent = null;
  for (const event of sorted) {
    if (!lastEvent || toMinutes(event.startTime) >= toMinutes(lastEvent.endTime)) {
      groups.push([event]);
    } else {
      groups[groups.length - 1].push(event);
    }
    lastEvent = event;
  }
  return groups.flatMap((group) => {
    const columns = [];
    for (const event of group) {
      let placed = false;
      for (const column of columns) {
        if (!column.some((e) => toMinutes(event.startTime) < toMinutes(e.endTime))) {
          column.push(event);
          placed = true;
          break;
        }
      }
      if (!placed) {
        columns.push([event]);
      }
    }
    for (let i = 0; i < columns.length; i++) {
      for (const event of columns[i]) {
        event._column = i;
        event._columns = columns.length;
      }
    }
    return group;
  });
}
function shouldShowTimeIndicator(date) {
  return isSameDay(date, /* @__PURE__ */ new Date());
}
const filteredEvents = computed(() => {
  return props.allEvents.filter(
    (e) => !e.allDay && e.date.toDateString() === props.day.fullDate.toDateString()
  );
});
const positionedEvents = computed(() => {
  return getPositionedEvents(filteredEvents.value);
});
function handleEditEvent($event, event) {
  emit("editEvent", {
    event,
    clickEvent: $event
  });
}
function handleMoveStart($event, event) {
  emit("eventMoveStart", {
    event,
    clickEvent: $event
  });
}
</script>

<template>
  <div
    class="border-r border-default relative"
    @click="(e) => emit('gridClick', dayIndex, e)"
  >
    <div
      v-for="hour in 24"
      :key="hour"
      :class="{ 'border-b border-default': hour !== 24 }"
      :style="{ height: hourHeightPx }"
    />

    <ClientOnly>
      <div
        v-if="currentTimeIndicator.show && shouldShowTimeIndicator(day.fullDate)"
        class="absolute left-0 right-0 z-30 pointer-events-none"
        :style="{ top: currentTimeIndicator.top }"
      >
        <div class="flex items-center">
          <div
            class="w-3 h-3 rounded-full -ml-1.5 border-2 shadow-sm bg-red-500 border-white"
          />

          <div class="flex-1 h-0.5 shadow-sm bg-red-500" />

          <div
            class="text-xs font-semibold px-2 py-1 rounded shadow-sm ml-2 text-red-500 border border-red-500"
          >
            {{ currentTimeIndicator.time }}
          </div>
        </div>
      </div>
    </ClientOnly>

    <NuxtCalendarPartialsEvent
      v-for="event in positionedEvents"
      :key="event.id"
      :this-event="event"
      :event-top="getEventTop(event.startTime)"
      :event-height="getEventHeight(event.startTime, event.endTime)"
      :team-member="getEventTeamMember(event)"
      @edit-event="($event) => handleEditEvent($event, event)"
      @move-start="($event) => handleMoveStart($event, event)"
      @resize-start="(e) => emit('eventResizeStart', event.id, e)"
    >
      <template
        v-if="$slots.event"
        #default
      >
        <slot
          name="event"
          :this-event="event"
        />
      </template>
    </NuxtCalendarPartialsEvent>
  </div>
</template>
