import { jsx as e, jsxs as t } from "react/jsx-runtime";
import v, { useId as g, useRef as y, useState as c, useEffect as k, useCallback as w } from "react";
import { u as C } from "./index-ABpo9sfg.js";
import { u as M } from "./useDraggable-DEoLIB5k.js";
const I = v.memo(({ isOpen: i, onInsert: d, onClose: m }) => {
  const u = g(), b = y(null), [l, n] = c(3), [a, s] = c(3), [o, h] = c(!0), { position: p, handleMouseDown: N } = M(i);
  k(() => {
    i && (n(3), s(3), h(!0));
  }, [i]), C({ isOpen: i, dialogRef: b, onClose: m });
  const f = w((r) => {
    r.preventDefault(), d(l, a, o), m();
  }, [l, a, o, d, m]);
  return i ? /* @__PURE__ */ e("div", { className: "mtx-modal-overlay", onClick: m, children: /* @__PURE__ */ e("div", { style: { transform: `translate(${p.x}px, ${p.y}px)` }, onClick: (r) => r.stopPropagation(), children: /* @__PURE__ */ t(
    "div",
    {
      ref: b,
      className: "mtx-modal-dialog mtx-insert-table-dialog",
      role: "dialog",
      "aria-modal": "true",
      "aria-labelledby": u,
      tabIndex: -1,
      children: [
        /* @__PURE__ */ t("div", { className: "mtx-modal-header", onMouseDown: N, style: { cursor: "move" }, children: [
          /* @__PURE__ */ e("h3", { className: "mtx-modal-title", id: u, children: "Sisipkan Tabel" }),
          /* @__PURE__ */ e("button", { className: "mtx-modal-close", onClick: m, 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__ */ t("form", { onSubmit: f, children: [
          /* @__PURE__ */ t("div", { className: "mtx-modal-body", children: [
            /* @__PURE__ */ t("div", { className: "mtx-form-group", children: [
              /* @__PURE__ */ t("label", { className: "mtx-form-label", htmlFor: "table-rows", children: [
                "Baris",
                /* @__PURE__ */ e("span", { className: "mtx-form-hint", children: "(1-10)" })
              ] }),
              /* @__PURE__ */ t("div", { className: "mtx-number-input-wrapper", children: [
                /* @__PURE__ */ e("button", { type: "button", className: "mtx-number-btn", onClick: () => n(Math.max(1, l - 1)), disabled: l <= 1, children: "−" }),
                /* @__PURE__ */ e(
                  "input",
                  {
                    id: "table-rows",
                    type: "number",
                    className: "mtx-form-input mtx-number-input",
                    value: l,
                    onChange: (r) => n(Math.min(10, Math.max(1, parseInt(r.target.value) || 1))),
                    min: "1",
                    max: "10",
                    autoFocus: !0
                  }
                ),
                /* @__PURE__ */ e("button", { type: "button", className: "mtx-number-btn", onClick: () => n(Math.min(10, l + 1)), disabled: l >= 10, children: "+" })
              ] })
            ] }),
            /* @__PURE__ */ t("div", { className: "mtx-form-group", children: [
              /* @__PURE__ */ t("label", { className: "mtx-form-label", htmlFor: "table-cols", children: [
                "Kolom",
                /* @__PURE__ */ e("span", { className: "mtx-form-hint", children: "(1-10)" })
              ] }),
              /* @__PURE__ */ t("div", { className: "mtx-number-input-wrapper", children: [
                /* @__PURE__ */ e("button", { type: "button", className: "mtx-number-btn", onClick: () => s(Math.max(1, a - 1)), disabled: a <= 1, children: "−" }),
                /* @__PURE__ */ e(
                  "input",
                  {
                    id: "table-cols",
                    type: "number",
                    className: "mtx-form-input mtx-number-input",
                    value: a,
                    onChange: (r) => s(Math.min(10, Math.max(1, parseInt(r.target.value) || 1))),
                    min: "1",
                    max: "10"
                  }
                ),
                /* @__PURE__ */ e("button", { type: "button", className: "mtx-number-btn", onClick: () => s(Math.min(10, a + 1)), disabled: a >= 10, children: "+" })
              ] })
            ] }),
            /* @__PURE__ */ e("div", { className: "mtx-form-group mtx-form-checkbox", children: /* @__PURE__ */ t("label", { className: "mtx-checkbox-label", children: [
              /* @__PURE__ */ e("input", { type: "checkbox", checked: o, onChange: (r) => h(r.target.checked) }),
              /* @__PURE__ */ e("span", { children: "Sertakan baris header" })
            ] }) }),
            /* @__PURE__ */ t("div", { className: "mtx-table-preview", children: [
              /* @__PURE__ */ t("div", { className: "mtx-table-preview-label", children: [
                "Pratinjau: ",
                l,
                "x",
                a
              ] }),
              /* @__PURE__ */ e("div", { className: "mtx-table-preview-grid", style: { display: "grid", gridTemplateColumns: `repeat(${a}, 1fr)`, gridTemplateRows: `repeat(${l}, 1fr)` }, children: Array.from({ length: l * a }).map((r, x) => /* @__PURE__ */ e("div", { className: `mtx-preview-cell${o && x < a ? " mtx-preview-header" : ""}` }, x)) })
            ] })
          ] }),
          /* @__PURE__ */ t("div", { className: "mtx-modal-footer", children: [
            /* @__PURE__ */ e("button", { type: "button", className: "mtx-btn mtx-btn-secondary", onClick: m, children: "Batal" }),
            /* @__PURE__ */ e("button", { type: "submit", className: "mtx-btn mtx-btn-primary", children: "Sisipkan Tabel" })
          ] })
        ] })
      ]
    }
  ) }) }) : null;
});
I.displayName = "InsertTableDialogImpl";
export {
  I as InsertTableDialogImpl
};
