import { useQuery, useMutation } from '@tanstack/vue-query'
import type { Ref } from 'vue'
import { apiClient } from '@/lib/axios'
import type { EventRegistrationData, VolunteerRegistrationForm } from '@/types/registration'

interface ApiResponse<T> {
  data: T
}

export function useRegistrationData(eventSlug: Ref<string>) {
  return useQuery({
    queryKey: ['registration-data', eventSlug],
    queryFn: async () => {
      const { data } = await apiClient.get<ApiResponse<EventRegistrationData>>(
        `/public/events/${eventSlug.value}/registration-data`,
      )

      return data.data
    },
    enabled: () => !!eventSlug.value,
    retry: false,
  })
}

export interface VolunteerRegistrationResponse {
  person: Record<string, unknown>
}

export function useSubmitRegistration() {
  return useMutation({
    mutationFn: async ({ eventId, form }: { eventId: string; form: VolunteerRegistrationForm }) => {
      const { data } = await apiClient.post<ApiResponse<VolunteerRegistrationResponse>>(
        `/events/${eventId}/volunteer-register`,
        form,
      )

      return data.data
    },
  })
}