import { jsx as t, jsxs as l } from "react/jsx-runtime";
import g, { useId as x, useRef as p, useState as f, useEffect as y, useCallback as h } from "react";
import { u as N } from "./index-ABpo9sfg.js";
import { u as k } from "./useDraggable-DEoLIB5k.js";
const z = g.memo(({
  isOpen: a,
  initialData: o = {},
  onSave: s,
  onClose: e
}) => {
  const m = x(), c = p(null), [i, r] = f(o.align || "left"), { position: d, handleMouseDown: u } = k(a);
  y(() => {
    a && r(o.align || "left");
  }, [o, a]), N({ isOpen: a, dialogRef: c, onClose: e });
  const b = h((n) => {
    n.preventDefault(), s({ align: i }), e();
  }, [i, s, e]), v = h(() => {
    r("left");
  }, []);
  return a ? /* @__PURE__ */ t("div", { className: "mtx-modal-overlay", onClick: e, children: /* @__PURE__ */ t("div", { style: { transform: `translate(${d.x}px, ${d.y}px)` }, onClick: (n) => n.stopPropagation(), children: /* @__PURE__ */ l(
    "div",
    {
      ref: c,
      className: "mtx-modal-dialog mtx-table-properties-dialog",
      role: "dialog",
      "aria-modal": "true",
      "aria-labelledby": m,
      tabIndex: -1,
      children: [
        /* @__PURE__ */ l("div", { className: "mtx-modal-header", onMouseDown: u, style: { cursor: "move" }, children: [
          /* @__PURE__ */ t("h3", { className: "mtx-modal-title", id: m, children: "Properti Tabel" }),
          /* @__PURE__ */ t("button", { className: "mtx-modal-close", onClick: e, title: "Tutup", "aria-label": "Close dialog", children: /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ t("path", { d: "M4 4l8 8m0-8l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })
        ] }),
        /* @__PURE__ */ l("form", { onSubmit: b, children: [
          /* @__PURE__ */ t("div", { className: "mtx-modal-body", children: /* @__PURE__ */ l("div", { className: "mtx-form-group", children: [
            /* @__PURE__ */ t("label", { className: "mtx-form-label", children: "Perataan Tabel" }),
            /* @__PURE__ */ l("div", { className: "mtx-align-buttons", children: [
              /* @__PURE__ */ t("button", { type: "button", className: `mtx-align-btn ${i === "left" ? "is-active" : ""}`, onClick: () => r("left"), title: "Rata Kiri", children: /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ t("path", { d: "M2 3h12v1.5H2V3zm0 4h8v1.5H2V7zm0 4h12v1.5H2v-1.5zM2 11h6v1.5H2V11z" }) }) }),
              /* @__PURE__ */ t("button", { type: "button", className: `mtx-align-btn ${i === "center" ? "is-active" : ""}`, onClick: () => r("center"), title: "Rata Tengah", children: /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ t("path", { d: "M2 3h12v1.5H2V3zm3 4h6v1.5H5V7zm-3 4h12v1.5H2v-1.5zM5 11h6v1.5H5V11z" }) }) }),
              /* @__PURE__ */ t("button", { type: "button", className: `mtx-align-btn ${i === "right" ? "is-active" : ""}`, onClick: () => r("right"), title: "Rata Kanan", children: /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ t("path", { d: "M2 3h12v1.5H2V3zm6 4h6v1.5H8V7zM2 11h12v1.5H2v-1.5zm6-4h6v1.5H8V7z" }) }) })
            ] })
          ] }) }),
          /* @__PURE__ */ l("div", { className: "mtx-modal-footer", children: [
            /* @__PURE__ */ t("button", { type: "button", className: "mtx-btn mtx-btn-secondary", onClick: v, children: "Reset" }),
            /* @__PURE__ */ t("button", { type: "button", className: "mtx-btn mtx-btn-secondary", onClick: e, children: "Batal" }),
            /* @__PURE__ */ t("button", { type: "submit", className: "mtx-btn mtx-btn-primary", children: "Terapkan" })
          ] })
        ] })
      ]
    }
  ) }) }) : null;
});
z.displayName = "TablePropertiesDialogImpl";
export {
  z as TablePropertiesDialogImpl
};
