import { useEffect, useState } from 'react'

export function useSelectedCalendars(): string[] {
  const [calendars, setCalendars] = useState<string[]>(() => {
    if (typeof window === 'undefined') return []
    try {
      return JSON.parse(localStorage.getItem('selectedCalendars') ?? '[]')
    } catch {
      return []
    }
  })

  useEffect(() => {
    if (typeof window === 'undefined') return

    const onStorage = (e: StorageEvent) => {
      if (e.key === 'selectedCalendars') {
        try {
          setCalendars(JSON.parse(e.newValue ?? '[]'))
        } catch {
          setCalendars([])
        }
      }
    }

    const onLocalChange = (e: CustomEvent<string[]>) => {
      setCalendars(e.detail)
    }

    window.addEventListener('storage', onStorage)
    window.addEventListener(
      'selectedCalendarsChanged',
      onLocalChange as EventListener
    )

    return () => {
      window.removeEventListener('storage', onStorage)
      window.removeEventListener(
        'selectedCalendarsChanged',
        onLocalChange as EventListener
      )
    }
  }, [])

  return calendars
}
