import { a as x } from "./e99a277f.js";
import { b9 as V, ca as D, cb as E, eC as f, w as r, a0 as i, ba as k, cK as P, bK as N, bB as p, eD as U, bO as z, bv as w, a as B, U as I, V as o, cy as R, P as n, eA as M, eE as j, bh as C, bi as c, bj as d, bg as u, bl as F, bn as H, bo as A, bG as L, ck as O, cl as W } from "./684d2f28.js";
import K, { useState as $, Suspense as _, useContext as h } from "react";
import { formDataChildren as G, FormDataPropertyView as T } from "./00dac55d.js";
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) => f(e.$style.footerIcon)};
        path {
          fill: ${(e) => f(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};
  }
`, J = {
  tips: r(k, i("signature.signHere")),
  onEvent: P,
  label: r(N, {
    position: "column",
    text: ""
  }),
  style: p(U),
  labelStyle: p(z),
  showUndo: r(w, !0),
  showClear: r(w, !0),
  value: B(""),
  ...G
}, Q = K.lazy(() => import("./b517dbb0.js").then((e) => e.i));
let g = function() {
  return new I(J, (e, v) => {
    let t = null;
    const [y, b] = $(!1), [m, S] = $([0, 0]), s = (a = !1) => {
      const l = a || (t == null ? void 0 : t.toData().length) === 0;
      t && (l && (t == null || t.clear()), v(O({
        value: W(l ? "" : t.toDataURL(), !1)
      })));
    };
    return e.label({
      style: e.style,
      labelStyle: e.labelStyle,
      children: /* @__PURE__ */ o(R, {
        onResize: (a, l) => {
          a && l && S([a, l]), s(!0);
        },
        children: /* @__PURE__ */ n(q, {
          onMouseDown: (a) => {
            a.preventDefault();
          },
          $style: e.style,
          $isEmpty: !e.value && !y,
          children: [/* @__PURE__ */ o("div", {
            className: "signature",
            children: /* @__PURE__ */ o(_, {
              fallback: /* @__PURE__ */ o(M, {}),
              children: /* @__PURE__ */ o(Q, {
                ref: (a) => {
                  t = a;
                },
                penColor: e.style.pen,
                clearOnResize: !1,
                canvasProps: {
                  className: "sigCanvas",
                  width: m[0],
                  height: m[1]
                },
                onEnd: () => {
                  s(), b(!1), e.onEvent("change");
                },
                onBegin: () => b(!0)
              })
            })
          }), (e.showClear || e.showUndo) && /* @__PURE__ */ n("div", {
            className: "footer",
            children: [e.showUndo && /* @__PURE__ */ o("span", {
              className: "anticon",
              children: /* @__PURE__ */ o(j, {
                onClick: () => {
                  const a = t == null ? void 0 : t.toData();
                  a && (a == null || a.pop(), t == null || t.fromData(a), s(), e.onEvent("change"));
                }
              })
            }), e.showClear && /* @__PURE__ */ o(x, {
              onClick: () => {
                s(!0), e.onEvent("change");
              }
            })]
          }), !(y || e.value) && /* @__PURE__ */ o("div", {
            className: "empty",
            children: e.tips
          })]
        })
      })
    });
  }).setPropertyViewFn((e) => /* @__PURE__ */ n(C, {
    children: [/* @__PURE__ */ o(c, {
      name: d.basic,
      children: e.tips.propertyView({
        label: i("signature.tips")
      })
    }), /* @__PURE__ */ o(T, {
      ...e
    }), ["logic", "both"].includes(h(u).editorModeStatus) && /* @__PURE__ */ n(c, {
      name: d.interaction,
      children: [e.onEvent.getPropertyView(), F(e), e.showUndo.propertyView({
        label: i("signature.showUndo")
      }), e.showClear.propertyView({
        label: i("signature.showClear")
      })]
    }), ["layout", "both"].includes(h(u).editorModeStatus) && e.label.getPropertyView(), ["layout", "both"].includes(h(u).editorModeStatus) && /* @__PURE__ */ n(C, {
      children: [/* @__PURE__ */ o(c, {
        name: d.style,
        children: e.style.getPropertyView()
      }), /* @__PURE__ */ o(c, {
        name: d.labelStyle,
        children: e.labelStyle.getPropertyView()
      })]
    })]
  })).build();
}();
g = class extends g {
  autoHeight() {
    return !1;
  }
};
const ae = H(g, [new A("value", i("value")), L]);
export {
  ae as SignatureComp
};
