import {FC, HTMLProps, memo, useMemo} from "react"
import {EnrichedEntity, Entity} from "../../../src/types"
import {useFactories} from "../../../src/hooks/useFactories"
import styles from './EntitySpan.module.css'
import {RecipeSpan} from "../Recipe/Recipe";
import {LeftClickIcon} from "../LeftClickIcon/LeftClickIcon";
import cx from 'classnames';
import {EntityIcon} from "../EntityIcon/EntityIcon";

interface Props extends Omit<HTMLProps<HTMLSpanElement>, 'value'> {
  value: EnrichedEntity|string
  state?: 'base'|'produced'|'unknown'
  leftClickText?: string
  rightClickText?: string
  simpleStyle?: boolean
  className?: string
}

const EntitySpanUnmemo: FC<Props> = ({className, value, state, leftClickText, rightClickText, simpleStyle, ...rest}) => {
  const {findFactory} = useFactories()
  const entity = useMemo<EnrichedEntity>(() => {
    return typeof value === "object"
      ? value
      : findFactory(value) ?? {
        usedBy: [],
        href: value,
        name: value,
        image: value,
        recipe: undefined
      }
  }, [findFactory, value])

  return <span className={cx(className, simpleStyle ? styles.spanSimple : styles.span)} {...rest}>
    {/* eslint-disable-next-line @next/next/no-img-element */}
    <img className={styles.img} src={`https://wiki.factorio.com${entity.image}`} alt={entity.name}/>
    <span className={styles[state ?? 'unknown']}>{entity.name}</span>
    <div className={styles.tooltip}>
      {entity.recipe && (
        <>
          <div className={styles.strong}>Recipe</div>
          <RecipeSpan recipe={entity.recipe}/>
        </>
      )}
      {entity.usedBy?.length ? (
        <>
          <div className={styles.strong}>Used By</div>
          <div className={styles.usedBy}>
            {entity.usedBy.map(used => <EntityIcon value={used} key={used.name}/>)}
          </div>
        </>
      ) : null}
      {(leftClickText || rightClickText) && (
        <>
          <div className={styles.strong}>Actions</div>
          {leftClickText && <div><LeftClickIcon className={styles.leftClick} classClick={styles.clickBtn}/> {leftClickText}</div>}
          {rightClickText && <div><LeftClickIcon className={styles.rightClick} classClick={styles.clickBtn}/> {rightClickText}</div>}
        </>
      )}
    </div>
  </span>
}

export const EntitySpan = memo(EntitySpanUnmemo)