import {onBeforeUnmount, onMounted, ref, type Ref} from 'vue'

export function useCalendarPopover(rootRef: Ref<HTMLElement | null>) {
  const isOpen = ref(false)
  const viewMode = ref<'days' | 'months' | 'years'>('days')

  const open = () => {
    isOpen.value = true
    viewMode.value = 'days'
  }
  const close = () => {
    isOpen.value = false
    viewMode.value = 'days'
  }
  // Le clic sur l'en-tête fait un cycle : jours → mois → années → jours.
  const cycleView = () => {
    if (viewMode.value === 'days') viewMode.value = 'months'
    else if (viewMode.value === 'months') viewMode.value = 'years'
    else viewMode.value = 'days'
  }

  const onMouseDown = (event: MouseEvent) => {
    if (!isOpen.value || !rootRef.value) return
    if (!rootRef.value.contains(event.target as Node)) close()
  }

  onMounted(() => document.addEventListener('mousedown', onMouseDown))
  onBeforeUnmount(() => document.removeEventListener('mousedown', onMouseDown))

  return {isOpen, viewMode, open, close, cycleView}
}