import { FC, HTMLProps, memo, useMemo } from 'react'
import { EnrichedEntity } from '../../../src/types'
import styles from './EntitySpan.module.css'
import { RecipeSpan } from '../Recipe/Recipe'
import { LeftClickIcon } from '../../icons/LeftClickIcon'
import cx from 'classnames'
import { EntityIcon } from '../EntityIcon/EntityIcon'
import { useFactories } from '../../contexts/FactoryProvider'
import { I18n } from '../../shared/I18n/I18n'

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

const EntitySpanBase: 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}>
              <I18n id={'page.home.tooltip.recipe'} />
            </div>
            <RecipeSpan recipe={entity.recipe} />
          </>
        )}
        {entity.usedBy?.length ? (
          <>
            <div className={styles.strong}>
              <I18n id={'page.home.tooltip.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}>
              <I18n id={'page.home.tooltip.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(EntitySpanBase)