import { useEffect, useLayoutEffect, useRef, useState } from "react"

import { getTariffs } from "@root/api/tariff"

import type { Tariff } from "@frontend/kitui"

export function useTariffFetcher({
	tariffsPerPage,
	apiPage,
	onSuccess,
	onError,
}: {
  baseUrl?: string;
  tariffsPerPage: number;
  apiPage: number;
  onSuccess: (response: Tariff[]) => void;
  onError?: (error: Error) => void;
}) {
	const [fetchState, setFetchState] = useState<"fetching" | "idle" | "all fetched">("idle")
	const onSuccessRef = useRef(onSuccess)
	const onErrorRef = useRef(onError)

	useLayoutEffect(() => {
		onSuccessRef.current = onSuccess
		onErrorRef.current = onError
	}, [onError, onSuccess])

	useEffect(() => {
		const controller = new AbortController()

		setFetchState("fetching")
		getTariffs(apiPage, tariffsPerPage, controller.signal)
			.then(([result]) => {
				if (result && result.tariffs.length > 0) {
					onSuccessRef.current(result.tariffs)
					setFetchState("idle")
				} else setFetchState("all fetched")
			})
			.catch(([_, error]) => {
				onErrorRef.current?.(error)
			})

		return () => controller.abort()
	}, [apiPage, tariffsPerPage])

	return fetchState
}