<script setup>
import { useNuxtCalendarConfig } from "../../../composables/useNuxtCalendarConfig";
defineProps({
  teams: { type: Array, required: true },
  month: { type: String, required: false },
  year: { type: String, required: false },
  week: { type: String, required: false },
  currentWeekStart: { type: Date, required: false }
});
const emit = defineEmits(["date-select", "toggle-member", "close"]);
const selectedDate = defineModel({ type: Date, ...{ default: () => /* @__PURE__ */ new Date() } });
function handleDateSelect(date) {
  selectedDate.value = date;
  emit("date-select", date);
}
const calendarConfig = useNuxtCalendarConfig();
</script>

<template>
  <div class="flex flex-col h-full gap-4 lg:gap-6">
    <div class="flex items-center justify-between lg:hidden px-2">
      <div class="flex items-baseline gap-2 whitespace-nowrap">
        <span class="text-xl font-bold text-gray-900 dark:text-white">{{ month }}</span>
        <span class="text-xl text-dimmed">{{ year }}</span>
        <span
          v-if="week"
          class="text-xs font-medium text-dimmed self-center ml-1"
        >{{ week }}</span>
      </div>
      <UButton
        icon="i-lucide-x"
        color="neutral"
        variant="ghost"
        @click="emit('close')"
      />
    </div>
    <slot
      :teams="teams"
      :selected-date="selectedDate"
    >
      <div class="lg:contents flex flex-col gap-4">
        <NuxtCalendarSidebarCalendar
          v-model="selectedDate"
          :current-week-start="currentWeekStart"
          @update:model-value="handleDateSelect"
        />

        <div class="flex-1 overflow-y-auto lg:overflow-visible">
          <NuxtCalendarSidebarCalendarList
            :teams="teams"
            @toggle-member="emit('toggle-member', $event)"
          />
        </div>
      </div>

      <div class="mt-auto pt-4">
        <UButton
          color="neutral"
          variant="ghost"
        >
          <UAvatar
            :src="calendarConfig.company.logo"
            :alt="calendarConfig.company.name"
            size="xs"
          />
          <div class="text-left flex-1 truncate">
            <div class="text-sm font-medium text-default">
              {{ calendarConfig.company.name }}
            </div>
          </div>
          <!-- <UIcon
          name="i-lucide-chevrons-up-down"
          class="w-4 h-4 text-neutral-500"
        /> -->
        </UButton>
      </div>
    </slot>
  </div>
</template>
