"use client"
import { useMemo } from "react"

type Props<T> = {
  items: T[] | undefined
  pageSize: number
  // When using suspense, isLoading will never be truthy, so make it optional
  isLoading?: boolean
  isLoadingNext: boolean | undefined
}

/**
 * This hook is used in conjunction with tables to help with appending dummy skeletons during loading.
 * A skeleton should be rendered wherever an index is undefined.
 */
export const useItemsWithSkeletons = <T>({
  items,
  pageSize,
  isLoading = false,
  isLoadingNext = false,
}: Props<T>) => {
  const skeletonCount = useMemo(() => {
    if (!items || isLoading || isLoadingNext) {
      return pageSize
    }
    return 0
  }, [items, isLoading, isLoadingNext, pageSize])

  const itemsWithSkeletons = useMemo(() => {
    const length = (items?.length ?? 0) + skeletonCount
    return Array(length)
      .fill(undefined)
      .map((_, i) => {
        if (isLoading) {
          return undefined
        }

        return items ? items[i] : undefined
      })
  }, [items, isLoading, skeletonCount])

  return itemsWithSkeletons
}