import { useQuery } from '@tanstack/react-query'
import { useMemo } from 'react'

import { getGamePeriodHistory } from '@/api'
import type { GamePeriodHistoryItemDto, PeriodHistoryDisplayItem } from '@/type'

export type { PeriodHistoryDisplayItem } from '@/type'

export const DEFAULT_PERIOD_HISTORY_LIMIT = 36

function formatPeriodNo(periodNo: string) {
  const [, timeSegment] = periodNo.split('-')

  return timeSegment && timeSegment.length <= 8 ? timeSegment : periodNo
}

function formatResultNumber(number: number) {
  return String(number).padStart(2, '0')
}

export function toPeriodHistoryDisplayItem(
  item: GamePeriodHistoryItemDto,
): PeriodHistoryDisplayItem {
  return {
    animalId: item.result_number,
    displayPeriodNo: formatPeriodNo(item.period_no),
    displayResultNumber: formatResultNumber(item.result_number),
    isOdd: item.result_number % 2 === 1,
    openTime: item.open_time,
    periodNo: item.period_no,
    resultNumber: item.result_number,
  }
}

export function usePeriodHistoryVm({
  enabled,
  limit = DEFAULT_PERIOD_HISTORY_LIMIT,
}: {
  enabled: boolean
  limit?: number
}) {
  const query = useQuery({
    queryKey: ['game', 'period-history', limit],
    enabled,
    queryFn: () => getGamePeriodHistory({ limit }),
    refetchOnMount: 'always',
    staleTime: 0,
  })

  const items = useMemo(
    () =>
      (query.data?.list ?? []).map((item) => toPeriodHistoryDisplayItem(item)),
    [query.data?.list],
  )

  return {
    isError: query.isError,
    isLoading: query.isLoading,
    items,
    refetch: query.refetch,
  }
}