import createClient from 'openapi-fetch'
import { navTypeToApiTypeMapping } from '@/utils/types'
import type { Window, NavTypes } from '@/utils/types'
import { computed, ref, watch } from 'vue'

import type { paths } from '@/api'

type Props = {
  activeWindow: Window
  activeType: NavTypes | undefined
}

type ApiParameters =
  paths['/type/{type}/startDate/{start_date}/endDate/{end_date}/sample/{sample}']['get']['parameters']['path']

type ApiResponse =
  paths['/type/{type}/startDate/{start_date}/endDate/{end_date}/sample/{sample}']['get']['responses']['200']['content']['application/json']

type ApiError =
  paths['/type/{type}/startDate/{start_date}/endDate/{end_date}/sample/{sample}']['get']['responses']['422']['content']['application/json']

export function useApi(props: Props) {
  const client = createClient<paths>({ baseUrl: import.meta.env.MODE === 'development' ? 'http://localhost:3000' : '' })

  const chartData = ref<ApiResponse | null>(null)
  const chartError = ref<ApiError | null>(null)
  const isLoading = ref(false)

  const apiParameters = computed<ApiParameters>(() => {
    const [start_date, end_date] = [props.activeWindow.getStart(), props.activeWindow.getEnd()]

    return {
      type: navTypeToApiTypeMapping[props.activeType || 'temperatuur'],
      start_date,
      end_date,
      sample: Math.round((start_date - end_date) / 60 / 288) || 1
    }
  })

  const getData = async () => {
    isLoading.value = true
    const { data } = await client.GET('/type/{type}/startDate/{start_date}/endDate/{end_date}/sample/{sample}', {
      params: { path: apiParameters.value }
    })
    if (data) chartData.value = data
    isLoading.value = false
  }

  watch([() => [props.activeType, props.activeWindow]], () => getData(), { immediate: true })

  return {
    chartData,
    chartError,
    isLoading
  }
}