import { a as x } from "./85cc6984.js";
import { X as F, aw as V, ax as D, eA as w, w as u, Y as r, S as E, cW as P, Z as c, eB as k, c3 as z, a as N, eC as U, U as B, F as l, aB as I, a6 as i, ey as R, eD as M, G as C, a7 as n, a8 as s, af as y, a9 as H, aa as W, ac as j, ab as A, P as L, O as b, cy as O, cz as _ } from "./603b75d9.js";
import G, { useState as S, Suspense as T, useContext as g } from "react";
import { formDataChildren as X, FormDataPropertyView as Y } from "./f9847c56.js";
import "react-dom";
const Z = F.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) => V(e.$style.margin)};	
  height: ${(e) => D(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};
  }
`, q = {
  tips: u(E, r("signature.signHere")),
  onEvent: P,
  label: u(L, {
    position: "column",
    text: ""
  }),
  style: c(k, "style"),
  labelStyle: c(z, "labelStyle"),
  showUndo: u(b, !0),
  showClear: u(b, !0),
  value: N(""),
  inputFieldStyle: c(U, "inputFieldStyle"),
  ...X
}, J = G.lazy(() => import("./cd64b3f1.js").then((e) => e.i));
let h = function() {
  return new B(q, (e, $) => {
    let t = null;
    const [m, p] = S(!1), [f, v] = S([0, 0]), d = (a = !1) => {
      const o = a || (t == null ? void 0 : t.toData().length) === 0;
      t && (o && (t == null || t.clear()), $(O({
        value: _(o ? "" : t.toDataURL(), !1)
      })));
    };
    return e.label({
      style: e.style,
      labelStyle: e.labelStyle,
      inputFieldStyle: e.inputFieldStyle,
      children: /* @__PURE__ */ l(I, {
        onResize: (a, o) => {
          a && o && v([a, o]), d(!0);
        },
        children: /* @__PURE__ */ i(Z, {
          onMouseDown: (a) => {
            a.preventDefault();
          },
          $style: e.inputFieldStyle,
          $isEmpty: !e.value && !m,
          children: [/* @__PURE__ */ l("div", {
            className: "signature",
            children: /* @__PURE__ */ l(T, {
              fallback: /* @__PURE__ */ l(R, {}),
              children: /* @__PURE__ */ l(J, {
                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__ */ i("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__ */ i(C, {
    children: [/* @__PURE__ */ l(n, {
      name: s.basic,
      children: e.tips.propertyView({
        label: r("signature.tips")
      })
    }), /* @__PURE__ */ l(Y, {
      ...e
    }), ["logic", "both"].includes(g(y).editorModeStatus) && /* @__PURE__ */ i(n, {
      name: s.interaction,
      children: [e.onEvent.getPropertyView(), H(e), e.showUndo.propertyView({
        label: r("signature.showUndo")
      }), e.showClear.propertyView({
        label: r("signature.showClear")
      })]
    }), ["layout", "both"].includes(g(y).editorModeStatus) && e.label.getPropertyView(), ["layout", "both"].includes(g(y).editorModeStatus) && /* @__PURE__ */ i(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();
}();
h = class extends h {
  autoHeight() {
    return !1;
  }
};
const le = W(h, [new j("value", r("value")), A]);
export {
  le as SignatureComp
};
