import type { CSSProperties } from "react";
import type { DpsMeterSnapshot } from "../game/dpsMeter";
import "./dpsMeter.css";

export function DpsMeterWidget({ snapshot, width, compact = false }: {
  snapshot: DpsMeterSnapshot; width?: number | null; compact?: boolean;
}) {
  const number = (value: number) => Math.round(value).toLocaleString();
  return <section className={`dps-meter ${compact ? "dps-meter--compact" : ""}`} aria-label="DPS meter"
    style={{ "--dps-meter-width": `${width ?? 230}px` } as CSSProperties}>
    <header><strong>DPS</strong><small>{snapshot.rows.length === 0 ? "Waiting for combat" : snapshot.active ? "Current fight" : "Last fight"}</small>
      <span>{Math.floor(snapshot.durationSeconds / 60)}:{String(Math.floor(snapshot.durationSeconds % 60)).padStart(2, "0")}</span></header>
    {snapshot.rows.length > 0 ? <ol>{snapshot.rows.map((row) => <li key={row.id}
      title={`${row.name}: ${number(row.dps)} DPS · ${number(row.total)} damage`}
      style={{ "--dps-color": row.color } as CSSProperties}>
      <i style={{ width: `${row.percent}%` }} aria-hidden="true" /><span>{row.name}</span><b>{number(row.dps)}</b>
    </li>)}</ol> : <p>Damage dealt per second</p>}
    {snapshot.rows.length > 0 && <footer><span>Party · {number(snapshot.totalDamage)} damage</span><b>{number(snapshot.totalDps)} DPS</b></footer>}
  </section>;
}