import { a as x } from "./d55ed660.js";
import { a3 as V, aD as D, aE as E, eI as w, w as u, a4 as r, X as F, dr as P, a5 as c, eJ as I, cg as k, a as N, eK as U, ci as z, U as R, H as l, aI as B, ad as o, cX as H, eL as M, I as C, ae as n, af as s, co as j, am as g, ag as L, ah as W, aj as O, ai as A, W as X, V as $, cO as _, cP as J } from "./56c67d3b.js";
import K, { useState as b, Suspense as T, useContext as h } from "react";
import "react-dom";
const q = V.div`
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  border: ${(e) => e.$style.borderWidth ? e.$style.borderWidth : "1px"} solid ${(e) => e.$style.border};
  border-radius: ${(e) => e.$style.radius};
  overflow: hidden;
  width: 100%;
  height: 100%;
  width: ${(e) => D(e.$style.margin)};	
  height: ${(e) => E(e.$style.margin)};	
  margin: ${(e) => e.$style.margin};	
  padding: ${(e) => e.$style.padding};
  .signature {
    background-color: ${(e) => e.$style.background};
    opacity: ${(e) => e.$isEmpty ? 0 : 1};
    width: 100%;
    height: 100%;
  }

  .sigCanvas {
    flex-grow: 1;
  }
  .footer {
    position: absolute;
    bottom: 0;
    right: 0;
    padding-right: 8px;
    > span {
      margin: 0 8px 16px 8px;
      cursor: pointer;
      svg {
        color: ${(e) => e.$style.footerIcon};
        width: 14px;
        height: 14px;
        path {
          fill: ${(e) => e.$style.footerIcon};
        }
      }
      &:hover svg {
        color: ${(e) => w(e.$style.footerIcon)};
        path {
          fill: ${(e) => w(e.$style.footerIcon)};
        }
      }
    }
  }
  .empty {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: ${(e) => e.$style.background};
    z-index: -1;
    color: ${(e) => e.$style.tips};
  }
`, G = {
  tips: u(F, r("signature.signHere")),
  onEvent: P,
  label: u(X, {
    position: "column",
    text: ""
  }),
  style: c(I, "style"),
  labelStyle: c(k, "labelStyle"),
  showUndo: u($, !0),
  showClear: u($, !0),
  value: N(""),
  inputFieldStyle: c(U, "inputFieldStyle"),
  ...z
}, Q = K.lazy(() => import("./10219502.js").then((e) => e.i));
let y = function() {
  return new R(G, (e, S) => {
    let t = null;
    const [m, p] = b(!1), [f, v] = b([0, 0]), d = (a = !1) => {
      const i = a || (t == null ? void 0 : t.toData().length) === 0;
      t && (i && (t == null || t.clear()), S(_({
        value: J(i ? "" : t.toDataURL(), !1)
      })));
    };
    return e.label({
      style: e.style,
      labelStyle: e.labelStyle,
      inputFieldStyle: e.inputFieldStyle,
      children: /* @__PURE__ */ l(B, {
        onResize: (a, i) => {
          a && i && v([a, i]), d(!0);
        },
        children: /* @__PURE__ */ o(q, {
          onMouseDown: (a) => {
            a.preventDefault();
          },
          $style: e.inputFieldStyle,
          $isEmpty: !e.value && !m,
          children: [/* @__PURE__ */ l("div", {
            className: "signature",
            children: /* @__PURE__ */ l(T, {
              fallback: /* @__PURE__ */ l(H, {}),
              children: /* @__PURE__ */ l(Q, {
                ref: (a) => {
                  t = a;
                },
                penColor: e.inputFieldStyle.pen,
                clearOnResize: !1,
                canvasProps: {
                  className: "sigCanvas",
                  width: f[0],
                  height: f[1]
                },
                onEnd: () => {
                  d(), p(!1), e.onEvent("change");
                },
                onBegin: () => p(!0)
              })
            })
          }), (e.showClear || e.showUndo) && /* @__PURE__ */ o("div", {
            className: "footer",
            children: [e.showUndo && /* @__PURE__ */ l("span", {
              className: "anticon",
              children: /* @__PURE__ */ l(M, {
                onClick: () => {
                  const a = t == null ? void 0 : t.toData();
                  a && (a == null || a.pop(), t == null || t.fromData(a), d(), e.onEvent("change"));
                }
              })
            }), e.showClear && /* @__PURE__ */ l(x, {
              onClick: () => {
                d(!0), e.onEvent("change");
              }
            })]
          }), !(m || e.value) && /* @__PURE__ */ l("div", {
            className: "empty",
            children: e.tips
          })]
        })
      })
    });
  }).setPropertyViewFn((e) => /* @__PURE__ */ o(C, {
    children: [/* @__PURE__ */ l(n, {
      name: s.basic,
      children: e.tips.propertyView({
        label: r("signature.tips")
      })
    }), /* @__PURE__ */ l(j, {
      ...e
    }), ["logic", "both"].includes(h(g).editorModeStatus) && /* @__PURE__ */ o(n, {
      name: s.interaction,
      children: [e.onEvent.getPropertyView(), L(e), e.showUndo.propertyView({
        label: r("signature.showUndo")
      }), e.showClear.propertyView({
        label: r("signature.showClear")
      })]
    }), ["layout", "both"].includes(h(g).editorModeStatus) && e.label.getPropertyView(), ["layout", "both"].includes(h(g).editorModeStatus) && /* @__PURE__ */ o(C, {
      children: [/* @__PURE__ */ l(n, {
        name: s.style,
        children: e.style.getPropertyView()
      }), /* @__PURE__ */ l(n, {
        name: s.labelStyle,
        children: e.labelStyle.getPropertyView()
      }), /* @__PURE__ */ l(n, {
        name: s.inputFieldStyle,
        children: e.inputFieldStyle.getPropertyView()
      })]
    })]
  })).build();
}();
y = class extends y {
  autoHeight() {
    return !1;
  }
};
const ae = W(y, [new O("value", r("value")), A]);
export {
  ae as SignatureComp
};
