import { useCombatAudioEnabled } from './CombatAudio'

export function PauseSettingsMenu({
  exitLabel = 'Exit Round',
  onOpenCharacter,
  onOpenInventory,
  onOpenTalents,
  onExit,
  onResume,
}: {
  exitLabel?: string
  onOpenCharacter?: () => void
  onOpenInventory?: () => void
  onOpenTalents?: () => void
  onExit: () => void
  onResume: () => void
}) {
  const [combatAudioEnabled, setCombatAudioEnabled] = useCombatAudioEnabled()

  return (
    <div className="arena-pause-backdrop" role="dialog" aria-modal="true" aria-labelledby="arena-pause-title">
      <section className="arena-pause-menu">
        <div>
          <p className="eyebrow">Paused</p>
          <h2 id="arena-pause-title">Settings</h2>
        </div>
        <div className="arena-pause-options" aria-label="Pause settings">
          <label>
            <span>Camera Drag</span>
            <strong>Enabled</strong>
          </label>
          <label>
            <span>Action Bar</span>
            <strong>1-0</strong>
          </label>
          <label>
            <span>Party Targeting</span>
            <strong>Arrow Keys</strong>
          </label>
          <label>
            <span>Sound</span>
            <button
              aria-checked={combatAudioEnabled}
              className={`arena-sound-toggle ${combatAudioEnabled ? 'enabled' : ''}`}
              onClick={() => setCombatAudioEnabled(!combatAudioEnabled)}
              role="switch"
              type="button"
            >
              <strong>{combatAudioEnabled ? 'On' : 'Muted'}</strong>
            </button>
          </label>
        </div>
        <div className="arena-pause-actions">
          {onOpenCharacter && <button className="back-button" onClick={onOpenCharacter} type="button">Character</button>}
          {onOpenInventory && <button className="back-button" onClick={onOpenInventory} type="button">Inventory</button>}
          {onOpenTalents && <button className="back-button" onClick={onOpenTalents} type="button">Talents</button>}
          <button className="primary-button" onClick={onResume} type="button">Resume</button>
          <button className="back-button" onClick={onExit} type="button">{exitLabel}</button>
        </div>
      </section>
    </div>
  )
}
