import { createSmartGrid } from "@smart-grid/js";
import "@smart-grid/themes/smart-grid.css";

const el = document.getElementById("grid-root");
if (!el) throw new Error("Missing #grid-root");

const grid = createSmartGrid(el, {
  theme: "smart-light",
  rowData: [
    { id: "1", city: "Berlin", temp: 12 },
    { id: "2", city: "Oslo", temp: 4 }
  ],
  columnDefs: [
    { field: "city", headerName: "City", sortable: true, filter: true },
    { field: "temp", headerName: "°C", sortable: true }
  ],
  pagination: true,
  pageSize: 10,
  rowSelection: "multiple",
  showToolPanel: true
});

// Push new data without remounting
grid.update({
  rowData: [
    { id: "1", city: "Berlin", temp: 12 },
    { id: "2", city: "Oslo", temp: 4 },
    { id: "3", city: "Lisbon", temp: 18 }
  ]
});

// Optional: listen for built-in DOM events
el.addEventListener("smart-grid:selection", (e: Event) => {
  const detail = (e as CustomEvent<unknown[]>).detail;
  console.log("selection", detail);
});

// When done
// grid.destroy();

createSmartGrid(el, {
  rowData,
  columnDefs,
  pagination: true,
  toolbar: { buttonDisplay: "both" },
  paginationUi: { buttonDisplay: "icon", maxPageButtons: 5 }
});