import { useContext as g, useRef as se, useState as C, useEffect as E } from "react";
import { bQ as i, eI as le, eF as L, w as I, a0 as n, ba as k, bv as K, bL as re, bB as ce, eJ as de, ef as D, v as ie, U as ue, V as o, P as s, bh as S, bi as p, bj as b, bg as v, bl as me, bn as pe, bo as y, bG as be, cw as he, dH as ge, eK as Ce, eL as ve, ca as ye, cb as fe, eM as V, eN as we, eO as xe, eP as Ae, eQ as _, ea as Ee, bE as Le, c1 as d, eR as Ie, eS as ke } from "./684d2f28.js";
import { commentDate as De, convertCommentData as Se, checkUserInfoData as Ve, checkMentionListData as Me, CommentDataTooltip as Te, CommentUserDataTooltip as Ne } from "./eaaab0c1.js";
import "react-dom";
i.extend(le);
const je = [he, ge, Ce, ve], Pe = {
  value: L(Se, De),
  title: I(k, n("comment.titledDefaultValue")),
  placeholder: I(k, n("comment.placeholder")),
  buttonText: I(k, n("comment.buttonText")),
  sendCommentAble: K.DEFAULT_TRUE,
  deleteAble: K,
  userInfo: L(Ve, {
    name: "{{currentUser.name}}",
    email: "{{currentUser.email}}"
  }),
  mentionList: L(Me, {
    "@": ["Li Lei", "Han Meimei"],
    "#": ["123", "456", "789"]
  }),
  onEvent: re(je),
  style: ce(de),
  commentList: D("commentList", []),
  deletedItem: D("deletedItem", []),
  submitedItem: D("submitedItem", []),
  mentionName: ie("")
}, Ue = (t) => {
  const u = se(null), {
    value: T,
    dispatch: z,
    style: r,
    title: f,
    sendCommentAble: Q,
    buttonText: $,
    onEvent: Be,
    mentionList: h,
    userInfo: G,
    placeholder: J,
    deleteAble: X
  } = t, [N, q] = C([]), [l, w] = C([]), [W, Z] = C("@"), [x, j] = C(""), A = (e) => {
    q(d.merge(e, {
      "@": d.union(d.concat(e["@"], d.map(l, (a, c) => {
        var m;
        return (m = a == null ? void 0 : a.user) == null ? void 0 : m.name;
      })))
    }));
  };
  E(() => {
    w(T);
  }, [T]), E(() => {
    A(h);
  }, [h]), E(() => {
    t.commentList.onChange(l), A(h), setTimeout(() => {
      u.current && (u.current.scrollTop = 999999);
    }, 50);
  }, [l]);
  const ee = (e, a) => {
    Z(a);
  }, te = (e) => {
    var a, c, m, U, B, H, O, R, F, Y;
    return /* @__PURE__ */ s(Ie, {
      onClick: () => t.onEvent("click"),
      style: {
        backgroundColor: (a = e == null ? void 0 : e.user) != null && a.avatar ? "" : ke(((c = e == null ? void 0 : e.user) == null ? void 0 : c.displayName) === void 0 ? (m = e == null ? void 0 : e.user) == null ? void 0 : m.name : (U = e == null ? void 0 : e.user) == null ? void 0 : U.displayName)[1],
        verticalAlign: "middle"
      },
      src: (B = e == null ? void 0 : e.user) == null ? void 0 : B.avatar,
      children: [" ", (H = e == null ? void 0 : e.user) != null && H.displayName ? (O = e == null ? void 0 : e.user) == null ? void 0 : O.displayName : /^([\u4e00-\u9fa5]{2,4})$/gi.test((R = e == null ? void 0 : e.user) == null ? void 0 : R.name) ? (F = e == null ? void 0 : e.user) == null ? void 0 : F.name.slice(-2) : (Y = e == null ? void 0 : e.user) == null ? void 0 : Y.name[0]]
    });
  }, ne = (e) => {
    j(e);
  }, P = () => {
    let e = {
      user: G,
      value: x,
      createdAt: i().format()
    };
    t.submitedItem.onChange(e), w(d.concat(l, [e])), j(""), A(h), t.onEvent("submit");
  }, oe = (e) => {
    let a = d.cloneDeep(l);
    t.deletedItem.onChange(a.splice(e, 1)), w(a), t.onEvent("delete");
  }, ae = (e) => {
    e.shiftKey && (e.preventDefault(), P());
  };
  return /* @__PURE__ */ o("div", {
    style: {
      margin: r.margin ?? "3px",
      padding: r.padding ?? "3px",
      width: ye(r.margin ?? "3px"),
      height: fe(r.margin ?? "3px"),
      background: r.background,
      borderRadius: r.radius
    },
    children: /* @__PURE__ */ s("div", {
      style: {
        overflow: "auto",
        overflowX: "hidden",
        height: "100%"
      },
      ref: u,
      children: [/* @__PURE__ */ o(V, {
        header: f !== "" ? /* @__PURE__ */ o("div", {
          style: {
            position: "sticky",
            top: 0,
            background: r.background
          },
          children: l.length > 1 ? f.replaceAll("%d", l.length.toString()).replace("comment", "comments") : f.replaceAll("%d", l.length.toString())
        }) : "",
        size: "small",
        children: /* @__PURE__ */ o(we, {
          data: l,
          itemKey: "createdAt",
          children: (e, a) => {
            var c;
            return /* @__PURE__ */ o(V.Item, {
              actions: X ? [/* @__PURE__ */ o(xe, {
                style: {
                  color: "#c32230"
                },
                onClick: () => oe(a)
              })] : void 0,
              children: /* @__PURE__ */ o(V.Item.Meta, {
                avatar: te(e),
                title: /* @__PURE__ */ s("div", {
                  onClick: () => t.onEvent("click"),
                  children: [/* @__PURE__ */ o("a", {
                    children: (c = e == null ? void 0 : e.user) == null ? void 0 : c.name
                  }), /* @__PURE__ */ o(Ae, {
                    title: i(e == null ? void 0 : e.createdAt).isValid() ? i(e == null ? void 0 : e.createdAt).format("YYYY/M/D HH:mm:ss") : n("comment.dateErr"),
                    placement: "bottom",
                    children: /* @__PURE__ */ o("span", {
                      style: {
                        paddingLeft: "5px",
                        color: "#999",
                        fontSize: "11px"
                      },
                      children: i(e == null ? void 0 : e.createdAt).isValid() ? i(e == null ? void 0 : e.createdAt).fromNow() : n("comment.dateErr")
                    })
                  })]
                }),
                description: /* @__PURE__ */ o("span", {
                  children: e == null ? void 0 : e.value
                })
              })
            }, e == null ? void 0 : e.createdAt);
          }
        })
      }), Q ? /* @__PURE__ */ s("div", {
        style: {
          position: "sticky",
          bottom: 0,
          background: r.background
        },
        children: [/* @__PURE__ */ o(_, {
          style: {
            width: "100%",
            height: 50
          },
          onSearch: ee,
          prefix: Object.keys(N),
          onChange: ne,
          onSelect: (e) => {
            z(Ee("mentionName", e == null ? void 0 : e.value, !1)), t.onEvent("mention");
          },
          value: x,
          rows: 2,
          onPressEnter: ae,
          placeholder: J,
          children: (N[W] || []).map((e, a) => /* @__PURE__ */ o(_.Option, {
            value: e,
            children: e
          }, a.toString()))
        }), /* @__PURE__ */ o(Le, {
          type: "primary",
          style: {
            width: "100%",
            marginTop: "10px"
          },
          onClick: P,
          disabled: x === "",
          children: $
        })]
      }) : ""]
    })
  });
};
let M = function() {
  return new ue(Pe, (t, u) => /* @__PURE__ */ o(Ue, {
    ...t,
    dispatch: u
  })).setPropertyViewFn((t) => /* @__PURE__ */ s(S, {
    children: [/* @__PURE__ */ o(p, {
      name: b.basic,
      children: t.title.propertyView({
        label: n("comment.title")
      })
    }), (g(v).editorModeStatus === "logic" || g(v).editorModeStatus === "both") && /* @__PURE__ */ s(S, {
      children: [/* @__PURE__ */ s(p, {
        name: b.data,
        children: [t.value.propertyView({
          label: n("comment.value"),
          tooltip: Te,
          placeholder: "[]"
        }), t.userInfo.propertyView({
          label: n("comment.userInfo"),
          tooltip: Ne
        }), t.mentionList.propertyView({
          label: n("comment.mentionList"),
          tooltip: n("comment.mentionListDec")
        })]
      }), /* @__PURE__ */ s(p, {
        name: b.interaction,
        children: [t.onEvent.getPropertyView(), me(t), t.sendCommentAble.propertyView({
          label: n("comment.showSendButton")
        }), t.deleteAble.propertyView({
          label: n("comment.deleteAble")
        })]
      })]
    }), (g(v).editorModeStatus === "layout" || g(v).editorModeStatus === "both") && /* @__PURE__ */ s(S, {
      children: [/* @__PURE__ */ s(p, {
        name: b.layout,
        children: [t.sendCommentAble.getView() && t.buttonText.propertyView({
          label: n("comment.buttonTextDec")
        }), t.placeholder.propertyView({
          label: n("comment.placeholderDec")
        })]
      }), /* @__PURE__ */ o(p, {
        name: b.style,
        children: t.style.getPropertyView()
      })]
    })]
  })).build();
}();
M = class extends M {
  autoHeight() {
    return !1;
  }
};
const Ye = pe(M, [new y("commentList", n("comment.commentList")), new y("deletedItem", n("comment.deletedItem")), new y("submitedItem", n("comment.submitedItem")), new y("mentionName", n("comment.submitedItem")), be]);
export {
  Ye as CommentComp
};
