import { jsx as e, jsxs as l } from "react/jsx-runtime";
import c, { useId as p, useRef as h, useCallback as x } from "react";
import { u as b } from "./index-CkhZlaGj.js";
import { u } from "./useDraggable-DEoLIB5k.js";
const g = [
  { id: "plain", name: "Polos", description: "Tabel sederhana tanpa gaya tambahan", headerStyle: "none", borderStyle: "all", stripeRows: !1 },
  { id: "light", name: "Terang", description: "Kepala tabel abu-abu terang", headerStyle: "light", borderStyle: "all", stripeRows: !1 },
  { id: "dark", name: "Gelap", description: "Kepala tabel gelap dengan teks putih", headerStyle: "dark", borderStyle: "horizontal", stripeRows: !1 },
  { id: "blue", name: "Tema Biru", description: "Kepala tabel biru dengan baris belang", headerStyle: "blue", borderStyle: "horizontal", stripeRows: !0 },
  { id: "striped", name: "Belang", description: "Warna baris selang-seling", headerStyle: "light", borderStyle: "none", stripeRows: !0 },
  { id: "minimal", name: "Minimalis", description: "Hanya border horizontal", headerStyle: "none", borderStyle: "horizontal", stripeRows: !1 }
], N = c.memo(({ isOpen: i, onSelect: m, onClose: t }) => {
  const r = p(), s = h(null), n = x((a) => {
    m(a), t();
  }, [m, t]), { position: d, handleMouseDown: o } = u(i);
  return b({ isOpen: i, dialogRef: s, onClose: t }), i ? /* @__PURE__ */ e("div", { className: "mtx-modal-overlay", onClick: t, children: /* @__PURE__ */ e("div", { style: { transform: `translate(${d.x}px, ${d.y}px)` }, onClick: (a) => a.stopPropagation(), children: /* @__PURE__ */ l(
    "div",
    {
      ref: s,
      className: "mtx-modal-dialog mtx-table-templates-dialog",
      role: "dialog",
      "aria-modal": "true",
      "aria-labelledby": r,
      tabIndex: -1,
      children: [
        /* @__PURE__ */ l("div", { className: "mtx-modal-header", onMouseDown: o, style: { cursor: "move" }, children: [
          /* @__PURE__ */ e("h3", { className: "mtx-modal-title", id: r, children: "Template Tabel" }),
          /* @__PURE__ */ e("button", { className: "mtx-modal-close", onClick: t, title: "Tutup", "aria-label": "Close dialog", children: /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M4 4l8 8m0-8l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })
        ] }),
        /* @__PURE__ */ l("div", { className: "mtx-modal-body", children: [
          /* @__PURE__ */ e("p", { className: "mtx-template-dialog-hint", children: "Pilih template untuk diterapkan ke tabel yang sedang dipilih." }),
          /* @__PURE__ */ e("div", { className: "mtx-templates-grid", children: g.map((a) => /* @__PURE__ */ l("button", { type: "button", className: "mtx-table-template-card", onClick: () => n(a), children: [
            /* @__PURE__ */ e("div", { className: "mtx-template-preview", children: /* @__PURE__ */ l("div", { className: `mtx-template-table mtx-template-${a.id}`, children: [
              /* @__PURE__ */ l("div", { className: "mtx-template-row", children: [
                /* @__PURE__ */ e("div", { className: "mtx-template-cell mtx-template-header" }),
                /* @__PURE__ */ e("div", { className: "mtx-template-cell mtx-template-header" }),
                /* @__PURE__ */ e("div", { className: "mtx-template-cell mtx-template-header" })
              ] }),
              /* @__PURE__ */ l("div", { className: "mtx-template-row", children: [
                /* @__PURE__ */ e("div", { className: "mtx-template-cell" }),
                /* @__PURE__ */ e("div", { className: "mtx-template-cell" }),
                /* @__PURE__ */ e("div", { className: "mtx-template-cell" })
              ] }),
              /* @__PURE__ */ l("div", { className: "mtx-template-row", children: [
                /* @__PURE__ */ e("div", { className: "mtx-template-cell" }),
                /* @__PURE__ */ e("div", { className: "mtx-template-cell" }),
                /* @__PURE__ */ e("div", { className: "mtx-template-cell" })
              ] })
            ] }) }),
            /* @__PURE__ */ l("div", { className: "mtx-template-info", children: [
              /* @__PURE__ */ e("h4", { className: "mtx-template-name", children: a.name }),
              /* @__PURE__ */ e("p", { className: "mtx-template-description", children: a.description })
            ] })
          ] }, a.id)) })
        ] }),
        /* @__PURE__ */ e("div", { className: "mtx-modal-footer", children: /* @__PURE__ */ e("button", { type: "button", className: "mtx-btn mtx-btn-secondary", onClick: t, children: "Batal" }) })
      ]
    }
  ) }) }) : null;
});
N.displayName = "TableTemplatesDialogImpl";
export {
  N as TableTemplatesDialogImpl
};
