import { computed } from 'vue'
import { useAsyncState } from '@vueuse/core'
import type { Event } from '@/lib/types/event'
import { fetchEvents } from '@/lib/api/events'

export function useEvents() {
  const { state: events, isLoading, error: asyncError, execute: refresh } = useAsyncState(
    fetchEvents,
    [] as Event[],
    {
      immediate: true,
      resetOnExecute: false,
    }
  )

  const error = computed(() => {
    if (asyncError.value) {
      return {
        message: asyncError.value instanceof Error
          ? asyncError.value.message
          : 'An error occurred while fetching events'
      }
    }
    return null
  })

  const sortedEvents = computed(() => {
    return [...events.value].sort((a, b) =>
      new Date(b.time).getTime() - new Date(a.time).getTime()
    )
  })

  const upcomingEvents = computed(() => {
    const now = new Date()
    return sortedEvents.value.filter(event =>
      new Date(event.event_start_date) > now
    )
  })

  const pastEvents = computed(() => {
    const now = new Date()
    return sortedEvents.value.filter(event =>
      new Date(event.event_end_date) < now
    )
  })

  return {
    events: sortedEvents,
    upcomingEvents,
    pastEvents,
    isLoading,
    error,
    refresh,
  }
}