import { appendAxisIcon } from "./source-assets.mjs";

export function renderDevicePanel(document, { controller, snapshot = {} } = {}) {
  const section = document.createElement("section"); section.className = "panel device-panel";
  const title = document.createElement("h2"); title.className = "panel-title"; title.textContent = "Devices and faults"; section.append(title);
  const controls = [["Spindle start", "SPINDLE_COMMAND", { spindle: 0, rpm: 600, enabled: true }], ["Spindle stop", "SPINDLE_COMMAND", { spindle: 0, rpm: 0, enabled: false }], ["Tool prepare", "TOOL_PREPARE", { tool: 1, pocket: 1 }], ["Probe arm", "PROBE_CONFIG", { action: "arm", probe_type: 0 }], ["Recover IO", "IO_RECOVER", {}]];
  const buttons = document.createElement("div"); buttons.className = "device-buttons";
  const assets = { "Spindle start": "spindle_cw.gif", "Spindle stop": "tool_stop.gif", "Tool prepare": "tool_open.gif", "Probe arm": "tool_axis_z.gif", "Recover IO": "tool_power.gif" };
  for (const [label, kind, payload] of controls) { const button = document.createElement("button"); button.type = "button"; button.className = "control-button"; appendAxisIcon(document, button, assets[label], label); button.addEventListener("click", () => controller.client.send(kind, payload, { operationId: `device-${kind}-${label.replaceAll(" ", "-")}` })); buttons.append(button); }
  section.append(buttons);
  const state = document.createElement("pre"); state.className = "state-view device-state"; state.textContent = JSON.stringify(snapshot, null, 2); section.append(state);
  return section;
}