import { FC, HTMLProps, useMemo } from 'react'
import { Entity } from '../../../src/types'
import { useFactories } from '../../../src/hooks/useFactories'
import styles from './EntityIcon.module.css'
import cx from 'classnames'

interface Props extends Omit<HTMLProps<HTMLSpanElement>, 'value'> {
  value: Entity | string
  amount?: number
}

export const EntityIcon: FC<Props> = ({ className, value, amount, ...rest }) => {
  const { findFactory } = useFactories()
  const entity = useMemo<Entity>(() => {
    return typeof value === 'object'
      ? value
      : value === '/Time'
        ? {
          href: '/Time',
          name: 'Time',
          image: '/images/Time.png',
          recipe: undefined
        }
        : findFactory(value) ?? {
          href: value,
          name: value,
          image: value,
          recipe: undefined
        }
  }, [findFactory, value])

  return (
    <span {...rest} className={cx(className, styles.span)} title={entity.name}>
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        className={cx(styles.img, amount === undefined ? styles.noAmount : undefined)}
        src={`https://wiki.factorio.com${entity.image}`}
        alt={entity.name}
      />
      {amount !== undefined && <span className={styles.amount}>{amount}</span>}
    </span>
  )
}