import { ControllerBindingLabel } from '../../../components/ControllerIcons'
import type { ControllerIconStyle } from '../../../input'
import { IWT2_CLASS_METADATA } from '../content/classes'
import type { Iwt2EntityId, Iwt2PartyEntityState } from '../sim'
import { ArenaBar } from './ArenaBars'

export function PartyFrames({
  party,
  selectedPartyId,
  targetBindings,
  controllerIconStyle,
  onTarget,
}: {
  party: Iwt2PartyEntityState[]
  selectedPartyId: Iwt2EntityId
  targetBindings?: Array<string | null>
  controllerIconStyle?: ControllerIconStyle
  onTarget: (id: Iwt2EntityId) => void
}) {
  return (
    <aside className="iwt2-party-list" data-game-nav-active="true">
      {party.map((member) => {
        const meta = IWT2_CLASS_METADATA[member.classId]
        const selected = member.id === selectedPartyId
        const targetBinding = targetBindings?.[party.indexOf(member)]
        return (
          <button
            className={`iwt2-party-row ${targetBinding ? 'has-target-binding' : ''} ${selected ? 'game-selected selected' : ''}`}
            data-controller-nav="skip"
            data-game-selected={selected ? 'true' : undefined}
            key={member.id}
            onClick={() => onTarget(member.id)}
            type="button"
          >
            {targetBinding && (
              <span className="iwt2-party-target-key">
                <ControllerBindingLabel
                  binding={targetBinding}
                  iconStyle={controllerIconStyle ?? 'playstation'}
                />
              </span>
            )}
            <span className="iwt2-party-portrait" style={{ backgroundColor: meta.color }}>
              <img alt="" aria-hidden="true" draggable={false} src={meta.uiIconUrl} />
            </span>
            <div>
              <div className="iwt2-party-row-title">
                <strong>{meta.name}</strong>
                <small>{Math.ceil(member.health)}</small>
              </div>
              <ArenaBar className="hp" current={member.health} max={member.maxHealth} shield={member.shield} />
              {member.maxMana > 0 && (
                <ArenaBar className="mana" current={member.mana} max={member.maxMana} />
              )}
              <div className="iwt2-party-effects">
                {member.hotEffects.map((effect) => (
                  <span className="iwt2-effect-badge hot" key={effect.id}>
                    {effect.label} {Math.ceil(effect.remainingSeconds)}s
                  </span>
                ))}
                {member.shield > 0 && (
                  <span className="iwt2-effect-badge shield">
                    Shield {Math.ceil(member.shield)}
                  </span>
                )}
              </div>
              <small className="iwt2-party-damage">Damage {Math.round(member.damageDone)}</small>
            </div>
          </button>
        )
      })}
    </aside>
  )
}