import type { Iwt2BossEntityState } from '../sim'
import { ArenaBar } from './ArenaBars'
import { IWT2_BOSS_METADATA } from '../content/bosses'

export function BossHud({ boss, bosses }: { boss?: Iwt2BossEntityState, bosses?: Iwt2BossEntityState[] }) {
  const entries = bosses ?? (boss ? [boss] : [])
  return (
    <div className="iwt2-boss-hud">
      {entries.map((entry) => {
        const metadata = IWT2_BOSS_METADATA[entry.bossId]
        return (
          <div className="iwt2-boss-hud-row" key={entry.id}>
            <div>
              <strong>{metadata.name}</strong>
              <small>{Math.ceil(entry.health)} / {entry.maxHealth} HP</small>
              {entry.maxArmor > 0 && <small>{Math.ceil(entry.armor)} / {entry.maxArmor} Armor</small>}
              {entry.mechanicEnergyMax > 0 && <small>{Math.ceil(entry.mechanicEnergy)} / {entry.mechanicEnergyMax} Static</small>}
            </div>
            <small className="iwt2-boss-phase">{entry.attackPhase}</small>
            <ArenaBar className="boss" current={entry.health} max={entry.maxHealth} />
          </div>
        )
      })}
    </div>
  )
}