import { bossDifficultyLabel, bossDifficultyMultipliers } from "../game/dungeonDifficulty";
import { ControllerButton } from "./ControllerButton";
import "./dungeonRuns.css";

export function DungeonDifficultySlider({ value, onChange, selectedId, select }: {
  readonly value: number;
  readonly onChange: (value: number) => void;
  readonly selectedId: string;
  readonly select: (id: string) => void;
}) {
  const multipliers = bossDifficultyMultipliers(value);
  const controls = { selectedId, select };
  return <section className="dungeon-difficulty" aria-label="Boss difficulty">
    <label htmlFor="boss-difficulty"><strong>Boss difficulty</strong><span>{bossDifficultyLabel(value)}</span></label>
    <div className="dungeon-difficulty__control">
      <ControllerButton {...controls} controlId="boss-difficulty-down" className="front-button" aria-label="Decrease boss difficulty"
        disabled={value === 1} onClick={() => onChange(value - 1)}>−</ControllerButton>
      <input id="boss-difficulty" aria-label="Boss difficulty" type="range" min="1" max="10" step="1" value={value}
        aria-valuetext={bossDifficultyLabel(value)} onChange={(event) => onChange(Number(event.target.value))} />
      <ControllerButton {...controls} controlId="boss-difficulty-up" className="front-button" aria-label="Increase boss difficulty"
        disabled={value === 10} onClick={() => onChange(value + 1)}>+</ControllerButton>
    </div>
    <p>Boss health ×{multipliers.health.toFixed(2)} · Damage ×{multipliers.damage.toFixed(2)}</p>
    <small>Easy targets 30-second bosses and 45-second final bosses. Difficulty is fixed for the expedition. Each level has its own leaderboard.</small>
  </section>;
}