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>
}