import { jsx as t, jsxs as l } from "react/jsx-runtime";
import V, { useId as B, useRef as M, useCallback as b, useState as d, useEffect as A } from "react";
import { u as $ } from "./index-CkhZlaGj.js";
import { u as I } from "./useDraggable-DEoLIB5k.js";
const P = V.memo(({
  isOpen: o,
  initialData: i = {},
  onSave: f,
  onClose: a
}) => {
  const N = B(), k = M(null), p = b((e) => e ? e.endsWith("%") ? { value: e.replace("%", ""), unit: "%" } : e.endsWith("px") ? { value: e.replace("px", ""), unit: "px" } : { value: e.replace(/[^\d.]/g, ""), unit: "px" } : { value: "", unit: "%" }, []), C = p(i.width), [m, v] = d(C.value), [g, x] = d(C.unit), [h, u] = d(i.backgroundColor || ""), [n, r] = d(i.horizontalAlign || "left"), [c, s] = d(i.verticalAlign || "top"), { position: w, handleMouseDown: y } = I(o);
  A(() => {
    if (o) {
      const e = p(i.width);
      v(e.value), x(e.unit), u(i.backgroundColor || ""), r(i.horizontalAlign || "left"), s(i.verticalAlign || "top");
    }
  }, [p, i, o]), $({ isOpen: o, dialogRef: k, onClose: a });
  const z = b((e) => {
    e.preventDefault(), f({
      width: m ? `${m}${g}` : void 0,
      backgroundColor: h || void 0,
      horizontalAlign: n,
      verticalAlign: c
    }), a();
  }, [m, g, h, n, c, f, a]), H = b(() => {
    v(""), x("%"), u(""), r("left"), s("top");
  }, []);
  return o ? /* @__PURE__ */ t("div", { className: "mtx-modal-overlay", onClick: a, children: /* @__PURE__ */ t("div", { style: { transform: `translate(${w.x}px, ${w.y}px)` }, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ l(
    "div",
    {
      ref: k,
      className: "mtx-modal-dialog mtx-cell-properties-dialog",
      role: "dialog",
      "aria-modal": "true",
      "aria-labelledby": N,
      tabIndex: -1,
      children: [
        /* @__PURE__ */ l("div", { className: "mtx-modal-header", onMouseDown: y, style: { cursor: "move" }, children: [
          /* @__PURE__ */ t("h3", { className: "mtx-modal-title", id: N, children: "Properti Sel" }),
          /* @__PURE__ */ t("button", { className: "mtx-modal-close", onClick: a, 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: z, children: [
          /* @__PURE__ */ l("div", { className: "mtx-modal-body", children: [
            /* @__PURE__ */ l("div", { className: "mtx-form-group", children: [
              /* @__PURE__ */ t("label", { className: "mtx-form-label", htmlFor: "cell-width", children: "Lebar" }),
              /* @__PURE__ */ l("div", { className: "mtx-width-input-wrapper", children: [
                /* @__PURE__ */ t(
                  "input",
                  {
                    id: "cell-width",
                    type: "text",
                    className: "mtx-form-input mtx-width-input",
                    value: m,
                    onChange: (e) => v(e.target.value.replace(/[^\d.]/g, "")),
                    placeholder: "Otomatis"
                  }
                ),
                /* @__PURE__ */ l("select", { className: "mtx-form-select mtx-width-unit", value: g, onChange: (e) => x(e.target.value), children: [
                  /* @__PURE__ */ t("option", { value: "px", children: "px" }),
                  /* @__PURE__ */ t("option", { value: "%", children: "%" })
                ] })
              ] })
            ] }),
            /* @__PURE__ */ l("div", { className: "mtx-form-group", children: [
              /* @__PURE__ */ t("label", { className: "mtx-form-label", htmlFor: "cell-bg-color", children: "Warna Latar Belakang" }),
              /* @__PURE__ */ l("div", { className: "mtx-color-input-wrapper", children: [
                /* @__PURE__ */ t("input", { id: "cell-bg-color", type: "color", className: "mtx-color-picker-input", value: h || "#ffffff", onChange: (e) => u(e.target.value) }),
                /* @__PURE__ */ t("input", { type: "text", className: "mtx-form-input mtx-color-text-input", value: h, onChange: (e) => u(e.target.value), placeholder: "Kosongkan untuk bawaan" })
              ] })
            ] }),
            /* @__PURE__ */ l("div", { className: "mtx-form-group", children: [
              /* @__PURE__ */ t("label", { className: "mtx-form-label", children: "Perataan Horizontal" }),
              /* @__PURE__ */ l("div", { className: "mtx-align-buttons", children: [
                /* @__PURE__ */ t("button", { type: "button", className: `mtx-align-btn ${n === "left" ? "is-active" : ""}`, onClick: () => r("left"), title: "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 ${n === "center" ? "is-active" : ""}`, onClick: () => r("center"), title: "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 ${n === "right" ? "is-active" : ""}`, onClick: () => r("right"), title: "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-form-group", children: [
              /* @__PURE__ */ t("label", { className: "mtx-form-label", children: "Perataan Vertikal" }),
              /* @__PURE__ */ l("div", { className: "mtx-align-buttons", children: [
                /* @__PURE__ */ t("button", { type: "button", className: `mtx-align-btn ${c === "top" ? "is-active" : ""}`, onClick: () => s("top"), title: "Atas", children: /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ t("path", { d: "M8 2l4 4h-3v8H7V6H4L8 2z", transform: "rotate(180 8 8)" }) }) }),
                /* @__PURE__ */ t("button", { type: "button", className: `mtx-align-btn ${c === "middle" ? "is-active" : ""}`, onClick: () => s("middle"), title: "Tengah (Vertikal)", children: /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ t("rect", { x: "4", y: "6", width: "8", height: "4" }) }) }),
                /* @__PURE__ */ t("button", { type: "button", className: `mtx-align-btn ${c === "bottom" ? "is-active" : ""}`, onClick: () => s("bottom"), title: "Bawah", children: /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ t("path", { d: "M8 2l4 4h-3v8H7V6H4L8 2z" }) }) })
              ] })
            ] })
          ] }),
          /* @__PURE__ */ l("div", { className: "mtx-modal-footer", children: [
            /* @__PURE__ */ t("button", { type: "button", className: "mtx-btn mtx-btn-secondary", onClick: H, children: "Reset" }),
            /* @__PURE__ */ t("button", { type: "button", className: "mtx-btn mtx-btn-secondary", onClick: a, children: "Batal" }),
            /* @__PURE__ */ t("button", { type: "submit", className: "mtx-btn mtx-btn-primary", children: "Terapkan" })
          ] })
        ] })
      ]
    }
  ) }) }) : null;
});
P.displayName = "CellPropertiesDialogImpl";
export {
  P as CellPropertiesDialogImpl
};
