import type {ComponentProps, FunctionComponent} from 'react'
import {View} from 'react-native'

interface FlexSpaceBetweenLastRowFixProps {
  itemsPerRow: number
  totalItems: number
  style: ComponentProps<typeof View>['style']
}

/**
 * Als in een flex layout de space-between optie gekozen wordt, zal er in de laatste rij veel ruimte
 * zijn tussen de items als er niet genoeg items zijn om de rij op te vullen.
 * Deze component zorgt dat de laatste rij mooi links uitgelijnd wordt door de rij op te vullen met lege
 * dummy views totdat de rij vol is.
 *
 * @param itemsPerRow Het aantal items op een rij.
 * @param totalItems  Het totale aantal items.
 * @param style       De stijlregels die op elk item in de lijst toegepast moeten worden.
 */
const FlexSpaceBetweenLastRowFix: FunctionComponent<FlexSpaceBetweenLastRowFixProps> = ({
  itemsPerRow,
  totalItems,
  style,
}) => {
  const itemsNeededToJustifyCorrectly = itemsPerRow - (totalItems % itemsPerRow)

  return Array(itemsNeededToJustifyCorrectly === itemsPerRow ? 0 : itemsNeededToJustifyCorrectly)
    .fill(null)
    .map((_, index) => <View style={style} key={index} />)
}

export default FlexSpaceBetweenLastRowFix
