import { currentDisplayLayout } from "../platform/displayLayout";
import { currentUiDevice, useUiLayoutStore } from "../game/uiLayoutStore";
import { resolveDpsMeterDisplay } from "../game/uiLayout";
import { currentDpsMeterSnapshot, useDpsMeterStore } from "../game/dpsMeterStore";
import { EditableHudElement } from "./EditableHudElement";
import { DpsMeterWidget } from "./DpsMeterWidget";

export function DpsMeter() {
  useDpsMeterStore();
  const ui = useUiLayoutStore();
  const layout = ui.draft ?? ui.preferences.current[currentUiDevice()];
  if (resolveDpsMeterDisplay(layout, currentDisplayLayout() !== "single") !== "main") return null;
  return <EditableHudElement id="dps"><DpsMeterWidget snapshot={currentDpsMeterSnapshot()} width={layout.elements.dps.width} /></EditableHudElement>;
}