<script setup lang="ts">
import { ref } from 'vue';
import MonthView from './MonthView.vue';
import DaysView from './DaysView.vue';
import AgendaView from './AgendaView.vue';
import EventViewerPopup from './EventViewerPopup.vue';
import {
  type AgendaViewSpan,
  type DaysViewSpan
} from '@/types/spans';
import type { EntityObject } from '@ChronoManager/models/entity';
import type { CollectionObject } from '@ChronoManager/models/collection';

const props = defineProps<{
  view: 'days' | 'month' | 'agenda';
  currentDate: Date;
  calendars: CollectionObject[];
  initialDaysSpan?: DaysViewSpan;
  initialAgendaViewSpan?: AgendaViewSpan;
}>();

const emit = defineEmits<{
  'event-click': [event: EntityObject];
  'date-click': [date: Date];
  'update:current-date': [date: Date];
  'update:days-span': [span: DaysViewSpan];
  'update:agenda-span': [span: AgendaViewSpan];
}>();

// Popup state
const hoveredEvent = ref<EntityObject | null>(null);
const popupPosition = ref({ x: 0, y: 0 });
const showPopup = ref(false);
let hideTimeout: ReturnType<typeof setTimeout> | null = null;

function handleEventHover(data: { event: MouseEvent; entity: EntityObject }) {
  if (hideTimeout) {
    clearTimeout(hideTimeout);
    hideTimeout = null;
  }
  hoveredEvent.value = data.entity;
  popupPosition.value = {
    x: data.event.clientX,
    y: data.event.clientY
  };
  showPopup.value = true;
}

function hidePopup() {
  hideTimeout = setTimeout(() => {
    showPopup.value = false;
    hoveredEvent.value = null;
  }, 200);
}
</script>

<template>
  <div class="calendar-view-container">
    <EventViewerPopup
      :event="hoveredEvent"
      :position="popupPosition"
      :visible="showPopup"
      @click="$emit('event-click', $event)"
    />
    <MonthView
      v-if="view === 'month'"
      :current-date="currentDate"
      :calendars="calendars"
      @event-click="$emit('event-click', $event)"
      @date-click="$emit('date-click', $event)"
      @event-hover="handleEventHover"
      @event-hover-end="hidePopup"
      @update:current-date="$emit('update:current-date', $event)"
    />
    <DaysView
      v-else-if="view === 'days'"
      :current-date="currentDate"
      :calendars="calendars"
      :initial-span="initialDaysSpan"
      @event-click="$emit('event-click', $event)"
      @date-click="$emit('date-click', $event)"
      @event-hover="handleEventHover"
      @event-hover-end="hidePopup"
      @update:span="$emit('update:days-span', $event)"
      @update:current-date="$emit('update:current-date', $event)"
    />
    <AgendaView
      v-else-if="view === 'agenda'"
      :calendars="calendars"
      :current-date="currentDate"
      :initial-span="initialAgendaViewSpan"
      @event-click="$emit('event-click', $event)"
      @update:span="$emit('update:agenda-span', $event)"
      @update:current-date="$emit('update:current-date', $event)"
    />
  </div>
</template>

<style scoped>
.calendar-view-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.calendar-view-container > * {
  flex: 1;
  min-height: 0;
}
</style>
