import { useContext as y, useRef as re, useState as C, useEffect as S } from "react";
import { c5 as u, eH as ie, eE as E, w as I, Y as a, S as k, O as z, a2 as ce, Z as K, eI as de, az as me, ed as L, v as ue, U as pe, F as n, a6 as l, G as V, a7 as c, a8 as d, af as v, a9 as he, aa as be, ac as f, ab as ge, aw as ye, ax as Ce, eJ as M, eK as ve, eL as fe, as as we, eM as _, at as xe, bV as De, ak as Ae, eN as Se, eO as Ee, eP as Ie, _ as m, aj as ke, eQ as Le } from "./603b75d9.js";
import { commentDate as Ve, convertCommentData as Me, checkUserInfoData as Te, checkMentionListData as Ne, CommentDataTooltip as Pe, CommentUserDataTooltip as je } from "./e00ea3ee.js";
import "react-dom";
u.extend(ie);
const Ue = [Ae, Se, Ee, Ie], Be = {
  value: E(Me, Ve),
  title: I(k, a("comment.titledDefaultValue")),
  placeholder: I(k, a("comment.placeholder")),
  buttonText: I(k, a("comment.buttonText")),
  sendCommentAble: z.DEFAULT_TRUE,
  deleteAble: z,
  userInfo: E(Te, {
    name: "{{currentUser.name}}",
    email: "{{currentUser.email}}"
  }),
  mentionList: E(Ne, {
    "@": ["John Doe", "Jane Doe", "Michael Smith", "Emily Davis", "Robert Johnson", "Patricia Brown", "William Jones", "Jennifer Miller", "David Wilson", "Linda Moore"],
    "#": ["#lowcode", "#automation", "#appbuilder", "#nocode", "#workflow", "#draganddrop", "#rapiddevelopment", "#digitaltransformation", "#integration", "#api"]
  }),
  onEvent: ce(Ue),
  style: K(de, "style"),
  animationStyle: K(me, "animationStyle"),
  commentList: L("commentList", []),
  deletedItem: L("deletedItem", []),
  submitedItem: L("submitedItem", []),
  mentionName: ue("")
}, Oe = (t) => {
  const p = re(null), {
    value: N,
    dispatch: W,
    style: r,
    title: w,
    sendCommentAble: $,
    buttonText: G,
    onEvent: He,
    mentionList: b,
    userInfo: Q,
    placeholder: X,
    deleteAble: Z,
    animationStyle: g
  } = t, [P, q] = C([]), [s, x] = C([]), [ee, te] = C("@"), [D, j] = C(""), A = (e) => {
    q(m.merge(e, {
      "@": m.union(m.concat(e["@"], m.map(s, (o, i) => {
        var h;
        return (h = o == null ? void 0 : o.user) == null ? void 0 : h.name;
      })))
    }));
  };
  S(() => {
    x(N);
  }, [N]), S(() => {
    A(b);
  }, [b]), S(() => {
    t.commentList.onChange(s), A(b), setTimeout(() => {
      p.current && (p.current.scrollTop = 999999);
    }, 50);
  }, [s]);
  const ne = (e, o) => {
    te(o);
  }, ae = (e) => {
    var o, i, h, B, O, H, J, R, Y, F;
    return /* @__PURE__ */ l(ke, {
      onClick: () => t.onEvent("click"),
      style: {
        backgroundColor: (o = e == null ? void 0 : e.user) != null && o.avatar ? "" : Le(((i = e == null ? void 0 : e.user) == null ? void 0 : i.displayName) === void 0 ? (h = e == null ? void 0 : e.user) == null ? void 0 : h.name : (B = e == null ? void 0 : e.user) == null ? void 0 : B.displayName)[1],
        verticalAlign: "middle"
      },
      src: (O = e == null ? void 0 : e.user) == null ? void 0 : O.avatar,
      children: [" ", (H = e == null ? void 0 : e.user) != null && H.displayName ? (J = e == null ? void 0 : e.user) == null ? void 0 : J.displayName : /^([\u4e00-\u9fa5]{2,4})$/gi.test((R = e == null ? void 0 : e.user) == null ? void 0 : R.name) ? (Y = e == null ? void 0 : e.user) == null ? void 0 : Y.name.slice(-2) : (F = e == null ? void 0 : e.user) == null ? void 0 : F.name[0]]
    });
  }, oe = (e) => {
    j(e);
  }, U = () => {
    let e = {
      user: Q,
      value: D,
      createdAt: u().format()
    };
    t.submitedItem.onChange(e), x(m.concat(s, [e])), j(""), A(b), t.onEvent("submit");
  }, le = (e) => {
    let o = m.cloneDeep(s);
    t.deletedItem.onChange(o.splice(e, 1)), x(o), t.onEvent("delete");
  }, se = (e) => {
    e.shiftKey && (e.preventDefault(), U());
  };
  return /* @__PURE__ */ n("div", {
    style: {
      margin: r.margin ?? "3px",
      padding: r.padding ?? "3px",
      width: ye(r.margin ?? "3px"),
      height: Ce(r.margin ?? "3px"),
      background: r.background,
      borderRadius: r.radius,
      animation: g.animation,
      animationDelay: g.animationDelay,
      animationDuration: g.animationDuration,
      animationIterationCount: g.animationIterationCount
    },
    children: /* @__PURE__ */ l("div", {
      style: {
        overflow: "auto",
        overflowX: "hidden",
        height: "100%"
      },
      ref: p,
      children: [/* @__PURE__ */ n(M, {
        header: w !== "" ? /* @__PURE__ */ n("div", {
          style: {
            position: "sticky",
            top: 0,
            background: r.background
          },
          children: s.length > 1 ? w.replaceAll("%d", s.length.toString()).replace("comment", "comments") : w.replaceAll("%d", s.length.toString())
        }) : "",
        size: "small",
        children: /* @__PURE__ */ n(ve, {
          data: s,
          itemKey: "createdAt",
          children: (e, o) => {
            var i;
            return /* @__PURE__ */ n(M.Item, {
              actions: Z ? [/* @__PURE__ */ n(fe, {
                style: {
                  color: "#c32230"
                },
                onClick: () => le(o)
              })] : void 0,
              children: /* @__PURE__ */ n(M.Item.Meta, {
                avatar: ae(e),
                title: /* @__PURE__ */ l("div", {
                  onClick: () => t.onEvent("click"),
                  children: [/* @__PURE__ */ n("a", {
                    children: (i = e == null ? void 0 : e.user) == null ? void 0 : i.name
                  }), /* @__PURE__ */ n(we, {
                    title: u(e == null ? void 0 : e.createdAt).isValid() ? u(e == null ? void 0 : e.createdAt).format("YYYY/M/D HH:mm:ss") : a("comment.dateErr"),
                    placement: "bottom",
                    children: /* @__PURE__ */ n("span", {
                      style: {
                        paddingLeft: "5px",
                        color: "#999",
                        fontSize: "11px"
                      },
                      children: u(e == null ? void 0 : e.createdAt).isValid() ? u(e == null ? void 0 : e.createdAt).fromNow() : a("comment.dateErr")
                    })
                  })]
                }),
                description: /* @__PURE__ */ n("span", {
                  children: e == null ? void 0 : e.value
                })
              })
            }, e == null ? void 0 : e.createdAt);
          }
        })
      }), $ ? /* @__PURE__ */ l("div", {
        style: {
          position: "sticky",
          bottom: 0,
          background: r.background
        },
        children: [/* @__PURE__ */ n(_, {
          style: {
            width: "100%",
            height: 50
          },
          onSearch: ne,
          prefix: Object.keys(P),
          onChange: oe,
          onSelect: (e) => {
            W(xe("mentionName", e == null ? void 0 : e.value, !1)), t.onEvent("mention");
          },
          value: D,
          rows: 2,
          onPressEnter: se,
          placeholder: X,
          children: (P[ee] || []).map((e, o) => /* @__PURE__ */ n(_.Option, {
            value: e,
            children: e
          }, o.toString()))
        }), /* @__PURE__ */ n(De, {
          type: "primary",
          style: {
            width: "100%",
            marginTop: "10px"
          },
          onClick: U,
          disabled: D === "",
          children: G
        })]
      }) : ""]
    })
  });
};
let T = function() {
  return new pe(Be, (t, p) => /* @__PURE__ */ n(Oe, {
    ...t,
    dispatch: p
  })).setPropertyViewFn((t) => /* @__PURE__ */ l(V, {
    children: [/* @__PURE__ */ n(c, {
      name: d.basic,
      children: t.title.propertyView({
        label: a("comment.title")
      })
    }), (y(v).editorModeStatus === "logic" || y(v).editorModeStatus === "both") && /* @__PURE__ */ l(V, {
      children: [/* @__PURE__ */ l(c, {
        name: d.data,
        children: [t.value.propertyView({
          label: a("comment.value"),
          tooltip: Pe,
          placeholder: "[]"
        }), t.userInfo.propertyView({
          label: a("comment.userInfo"),
          tooltip: je
        }), t.mentionList.propertyView({
          label: a("comment.mentionList"),
          tooltip: a("comment.mentionListDec")
        })]
      }), /* @__PURE__ */ l(c, {
        name: d.interaction,
        children: [t.onEvent.getPropertyView(), he(t), t.sendCommentAble.propertyView({
          label: a("comment.showSendButton")
        }), t.deleteAble.propertyView({
          label: a("comment.deleteAble")
        })]
      })]
    }), (y(v).editorModeStatus === "layout" || y(v).editorModeStatus === "both") && /* @__PURE__ */ l(V, {
      children: [/* @__PURE__ */ l(c, {
        name: d.layout,
        children: [t.sendCommentAble.getView() && t.buttonText.propertyView({
          label: a("comment.buttonTextDec")
        }), t.placeholder.propertyView({
          label: a("comment.placeholderDec")
        })]
      }), /* @__PURE__ */ n(c, {
        name: d.style,
        children: t.style.getPropertyView()
      }), /* @__PURE__ */ n(c, {
        name: d.animationStyle,
        hasTooltip: !0,
        children: t.animationStyle.getPropertyView()
      })]
    })]
  })).build();
}();
T = class extends T {
  autoHeight() {
    return !1;
  }
};
const ze = be(T, [new f("commentList", a("comment.commentList")), new f("deletedItem", a("comment.deletedItem")), new f("submitedItem", a("comment.submitedItem")), new f("mentionName", a("comment.submitedItem")), ge]);
export {
  ze as CommentComp
};
