import { FC } from 'react'
import { Recipe } from '../../../src/types'
import { EntityIcon } from '../EntityIcon/EntityIcon'
import styles from './Recipe.module.css'

interface Props {
  recipe: Recipe
}

export const RecipeSpan: FC<Props> = ({ recipe }) => {
  const toEntityIcon = ([key, amount]: [string, number]) => (
    <EntityIcon key={key} value={key} amount={amount} />
  )
  const joinByPlus = (elems: JSX.Element[]) =>
    elems.reduce((acc, curr) => {
      if (acc.length) {
        return [...acc, '+', curr]
      } else {
        return [curr]
      }
    }, [] as (JSX.Element | string)[])
  const before = Object.entries({ ...recipe.prerequisites }).map(toEntityIcon)
  const after = Object.entries({ ...recipe.output }).map(toEntityIcon)
  return (
    <span className={styles.recipe}>
      {joinByPlus([toEntityIcon(['/Time', recipe.time]), ...before])} → {joinByPlus(after)}
    </span>
  )
}