import { ControllerBindingLabel } from '../../components/ControllerIcons'
import { DEFAULT_BINDINGS, useInput } from '../../input'
import { IWT2_CLASS_METADATA, IWT2_PARTY_ORDER } from './content/classes'
import { IWT2_ABILITY_ACTIONS, IWT2_TARGET_ACTIONS } from './content/controls'
import { abilitiesForHealer, IWT2_HEALER_METADATA } from './content/healerAbilities'
import { loadIwt2Save } from './save/iwt2Repository'

export function Iwt2BottomDisplay() {
  const {
    bindings,
    directPartyTargeting,
    lastDevice,
  } = useInput()
  const activeBindings = lastDevice === 'controller'
    ? bindings.controller
    : DEFAULT_BINDINGS.controller
  const save = loadIwt2Save()
  const abilities = abilitiesForHealer(save.character.healerStyle)
  const healer = IWT2_HEALER_METADATA[save.character.healerStyle]
  const partyTargets = IWT2_PARTY_ORDER.map((classId) => IWT2_CLASS_METADATA[classId])

  return (
    <main className="dual-bottom-display iwt2-bottom-display">
      <section className="dual-controls-resource iwt2-bottom-resource">
        <div>
          <p className="eyebrow">I Want To Heal 2</p>
          <strong>{healer.name}</strong>
        </div>
        <div className="dual-controls-mana">
          <span>Mana 100 / 100</span>
          <div className="bar mana-bar"><span style={{ width: '100%' }} /></div>
        </div>
      </section>
      <section className={`dual-controls-targets ${directPartyTargeting ? 'direct' : ''}`} aria-label="Party targets">
        {directPartyTargeting ? (
          partyTargets.map((target, index) => {
            const action = IWT2_TARGET_ACTIONS[index] ?? 'targetParty1'
            const label = target.id === 'healer' ? 'Player' : target.name.replace(' Tank', '')
            return (
              <div className="dual-control-chip" key={target.id}>
                <ControllerBindingLabel
                  binding={activeBindings[action]}
                  iconStyle="playstation"
                />{' '}
                {label}
              </div>
            )
          })
        ) : (
          <>
            <div className="dual-control-chip">
              <ControllerBindingLabel binding="Button12" iconStyle="playstation" /> Previous Target
            </div>
            <div className="dual-control-chip">
              Next Target <ControllerBindingLabel binding="Button13" iconStyle="playstation" />
            </div>
          </>
        )}
      </section>
      <section className="dual-controls-spells iwt2-bottom-spell-grid" aria-label="Spells and cooldowns">
        {abilities.map((ability, index) => {
          const action = IWT2_ABILITY_ACTIONS[index] ?? 'ability1'
          return (
            <div className="spell iwt2-bottom-spell" key={ability.id}>
              <kbd>
                <ControllerBindingLabel
                  binding={activeBindings[action]}
                  compact
                  iconStyle="playstation"
                />
              </kbd>
              <span className={`spell-icon spell-${ability.kind}`}>{ability.icon}</span>
              <strong>{ability.name}</strong>
              <small>{ability.manaCost} Mana</small>
            </div>
          )
        })}
      </section>
    </main>
  )
}