import classNames from 'classnames'

import { itemsMap } from '../../data/maps.js'
import { colors } from '../../styles/tokens.js'
import { INGREDIENTS_LIST_ITEM } from '../../templates.js'
import { integerString } from '../../utils/integerString.js'
import { P } from '../Elements/index.js'

export default function IngredientsList({
  playerInventoryQuantities,
  recipe: { ingredients, name },
}: {
  playerInventoryQuantities: Record<string, number>
  recipe: { ingredients: Record<string, number>; name: string }
}) {
  return (
    <ul {...{ className: 'card-list', title: `Ingredients for ${name}` }}>
      <li>
        <h4>Ingredients required:</h4>
      </li>
      {Object.keys(ingredients).map(itemId => (
        <li key={itemId} data-testid="ingredient">
          <P
            {...{
              className: classNames(
                (playerInventoryQuantities[itemId] || 0) >= ingredients[itemId]
                  ? 'in-stock'
                  : 'out-of-stock'
              ),
            }}
            sx={{
              color:
                (playerInventoryQuantities[itemId] || 0) >= ingredients[itemId]
                  ? undefined
                  : colors.error,
            }}
          >
            {INGREDIENTS_LIST_ITEM`${ingredients[itemId]}${
              itemsMap[itemId].name
            }${integerString(playerInventoryQuantities[itemId] || 0)}
            `}
          </P>
        </li>
      ))}
    </ul>
  )
}