<script setup>
import { useNuxtCalendarConfig } from "../../../composables/useNuxtCalendarConfig";
import { formatTime } from "../../../utils";
const config = useNuxtCalendarConfig();
defineProps({
  thisEvent: { type: Object, required: true },
  eventTop: { type: String, required: true },
  eventHeight: { type: String, required: true },
  teamMember: { type: Object, required: false }
});
const emit = defineEmits(["resizeStart", "moveStart", "editEvent"]);
</script>

<template>
  <div
    class="absolute w-full overflow-hidden select-none event-item cursor-pointer"
    :data-event-id="thisEvent.id"
    :style="{
  top: eventTop,
  height: eventHeight,
  width: thisEvent._columns ? `calc(${100 / thisEvent._columns}% - 4px)` : 'calc(100% - 4px)',
  left: thisEvent._column !== void 0 && thisEvent._columns ? `calc(${thisEvent._column * 100 / thisEvent._columns}% + 2px)` : '2px',
  zIndex: 10 + (thisEvent._column || 0)
}"
    @mousedown="emit('moveStart', $event)"
    @touchstart="emit('moveStart', $event)"
    @click.stop="emit('editEvent', $event)"
  >
    <div
      class="h-full rounded-lg p-1 sm:p-3 relative dark:bg-opacity-50"
      :style="{
  backgroundColor: teamMember?.color.backgroundDimmed,
  borderLeft: `3px solid ${teamMember?.color.border}`,
  opacity: thisEvent.id === 'new' ? 0.7 : 1
}"
    >
      <slot
        :this-event="thisEvent"
      >
        <div>
          <p class="font-semibold text-sm text-highlighted tracking-tight">
            {{ thisEvent.title }}
          </p>
          <p class="text-xs dark:text-muted tracking-wide">
            {{ formatTime(thisEvent.startTime, config.timeFormat) }} - {{ formatTime(thisEvent.endTime, config.timeFormat) }}
          </p>
        </div>

        <div
          v-if="thisEvent.category"
          class="mt-2 rounded-full inline-flex items-center text-xs gap-1 px-2 py-1 text-default"
          :style="{ background: teamMember?.color.backgroundDimmed, color: teamMember?.color.background }"
        >
          <span
            :style="{ background: teamMember?.color.background }"
            class="w-1.5 h-1.5 rounded-full"
          />
          <span>{{ thisEvent.category }} </span>
        </div>
      </slot>

      <!-- resize drag element -->
      <div
        class="absolute left-0 bottom-0 w-full h-2 cursor-ns-resize z-20 rounded-b-lg"
        @mousedown.stop="emit('resizeStart', $event)"
        @click.stop
      />
    </div>
  </div>
</template>
