import { useGame } from '../../contexts/game-context'
import type { GameEntity } from '../../types'

export default function AbstractChoices () {
  const { clickTarget, allClickable, undoStep, currentMoveTargets } = useGame()

  const abstractChoices = [...allClickable].filter(
    (c) => (c as GameEntity).abstract
  ) as GameEntity[]

  return (
    <div style={{ position: 'relative' }}>
      <button
        style={{ visibility: 'hidden' }}
        className="button button--style-b button--x-small abstract-choices__choice"
        type="button"
      >
        Spacer
      </button>
      <div
        style={{
          position: 'absolute',
          top: 0,
          width: '100%',
        }}
      >
        {!!currentMoveTargets.length && (
          <button
            type="button"
            className="button button--style-c button--x-small abstract-choices__choice abstract-choices__choice--undo"
            onClick={undoStep}
          >
            Undo
          </button>
        )}
        {abstractChoices.map((choice, i) => (
          <button
            key={i}
            type="button"
            className="button button--style-b button--x-small abstract-choices__choice"
            onClick={() => clickTarget(choice)}
          >
            {String(choice.value ?? '')}
          </button>
        ))}
      </div>
    </div>
  )
}