import { jsx as d, jsxs as bt } from "react/jsx-runtime";
import { PostProvider as yt, PostConsumer as vt } from "@devgateway/wp-react-lib";
import Ct from "../connected-templates/PostIntro.js";
import { useRef as xt, useState as nt, useEffect as Ot } from "react";
import { Container as rt } from "semantic-ui-react";
import * as c from "d3";
const wt = {
  visibility: "visible",
  position: "relative",
  height: "auto",
  width: "auto"
}, Pt = {
  position: "absolute",
  overflow: "hidden",
  display: "none"
}, M = 0, Mt = (T) => {
  const {
    posts: r,
    position: v,
    lineWidth: L,
    meta: U,
    locale: H,
    lineColor: S,
    height: u,
    config: l,
    marginLeft: W,
    marginTop: z,
    marginRight: E,
    marginBottom: R,
    fontSize: C,
    titleWidth: k,
    titleHeight: $,
    subtitleWidth: I,
    subtitleHeight: N,
    enableTitlePopup: g,
    enableCirclePopup: p,
    enableDefaultPopup: A,
    closePopupOnMouseOut: f,
    unique: x
  } = T, O = xt(), [J, a] = nt(!1), [m, b] = nt(null), _ = (e) => l[e].position, V = (e) => l[e].connectorLineHeight, st = (e) => l[e].subtitleOffset, at = (e) => l[e].titleOffset, j = (e) => {
    var i;
    return (i = l[e]) == null ? void 0 : i.circleColor;
  }, K = (e) => l[e].lineColor, Q = (e) => l[e].titleColor, ct = (e) => l[e].labelColor, dt = (e) => l[e].tooltipFontColor || "#fff", ut = (e) => l[e].size, pt = (e) => l[e].readMoreLabel, w = (e) => "circle" + x + e, X = (e) => "title" + x + e, P = (e) => {
    c.selectAll("#" + w(e)).style("stroke", "none").style("fill", j(e)), c.selectAll("#label" + e).style("font-weight", "normal");
  }, Y = (e) => {
    P(M), c.selectAll("#" + w(e)).style("stroke", j(e)).style("fill", "#fff"), c.selectAll("#label" + e).style("font-weight", "bold");
  };
  return Ot(() => {
    const e = {
      top: z,
      right: E,
      bottom: R,
      left: W
    };
    let i = u / 2;
    v == "middle" && (i = u / 2), v == "top" && (i = e.top), v == "bottom" && (i = u - e.bottom);
    const s = {};
    r.forEach((o, t) => {
      s[o.id] = t;
    });
    const Z = O.current.clientWidth, ft = u, h = c.scaleLinear().domain([0, r.length - 1]).range([e.left, Z - e.right]), tt = c.line(), ht = [
      [h(0), 0],
      [h(r.length - 1), 0]
    ], gt = tt(ht), B = c.select(O.current);
    B.attr("width", Z).attr("height", ft), B.node().parentNode;
    const et = (o, t, n) => {
      let q = [0, 0];
      if (o) {
        const F = o.target.getBoundingClientRect(), it = o.target.closest(".time").getBoundingClientRect(), G = F.left - it.left, mt = F.top - it.top;
        q = [G + 30, mt + 50];
        const lt = 600;
        F.left + G + lt + 30 > window.innerWidth && (q[0] = G - lt * 0.6);
      }
      a(!0), b({ data: t, index: n, position: q }), Y(n);
    }, ot = (o, t, n) => {
      P(n);
    }, y = B.append("g");
    if (y.attr("transform", `translate(0,${i})`), y.append("path").attr("d", gt).attr("stroke-width", L).attr("stroke", S), y.selectAll(".tick").data(r).enter().append("path").attr(
      "d",
      (o, t) => tt([
        [h(t), 0],
        [
          h(t),
          _(t) === "top" ? V(t) * -1 : V(t)
        ]
      ])
    ).attr("stroke-width", L).attr("stroke", (o, t) => K(t)).on("mouseover", function(o, t, n) {
    }), y.selectAll(".circle").data(r).enter().append("circle").attr("id", (o, t) => w(t)).attr("cx", (o, t) => h(t)).attr("cy", 0).attr("id", (o, t) => w(t)).attr("r", (o, t) => ut(t)).style("stroke-width", 3).style("cursor", p ? "pointer" : "default").style("fill", (o, t) => j(t)).on("mouseover", function(o, t) {
      p && et(o, t, s[t.id]);
    }).on("mouseout", function(o, t, n) {
      p && (ot(o, t, s[t.id]), f && (a(!1), b(null)));
    }), y.selectAll(".label").data(r).enter().append("foreignObject").attr("id", (o, t) => "label" + t).attr("x", function(o, t) {
      return h(t) - I / 2;
    }).attr("width", I).attr("height", N).attr("overflow", "visible").style("opacity", 1).attr("y", (o, t) => st(t)).append("xhtml:div").style("color", (o, t) => ct(t)).style("font-size", parseInt(C) - 2 + "px").style("line-height", "100%").style("text-align", "center").html((o, t) => o.meta_fields.subtitle).on("mouseover", (o, t, n) => {
    }).on("mouseout", (o, t, n) => {
    }).classed("subtitle-class", !0), y.selectAll(".title").data(r).enter().append("foreignObject").attr("x", function(o, t) {
      return h(t) - k / 2;
    }).attr("width", k).attr("height", $).attr("overflow", "visible").style("opacity", 1).attr("y", (o, t) => at(t)).append("xhtml:div").attr("id", (o, t) => X(t)).style("font-size", parseInt(C) + 1 + "px").style("color", (o, t) => Q(t)).style("font-weight", (o) => "bold").style("line-height", "100%").style("text-align", "center").style("cursor", g ? "pointer" : "default").style("overflow-wrap", "break-word").html((o, t) => {
      const n = pt(t);
      let D = o.title.rendered;
      return n && (D += `<br><span style="font-size:${parseInt(C) - 3}px;color:${Q(t)}">${n}</span>`), D;
    }).on("mouseover", (o, t, n) => {
      g && et(o, t, s[t.id]);
    }).on("mouseout", (o, t, n, D) => {
      g && (ot(o, t, s[t.id]), f && (a(!1), b(null)));
    }), A) {
      let o = !1;
      p && (o = !0, c.select("#" + w(M)).dispatch(
        "mouseover"
      )), !o && g && c.select("#" + X(M)).dispatch(
        "mouseover"
      );
    }
  }, []), /* @__PURE__ */ bt(
    "div",
    {
      className: "time line",
      onMouseLeave: (e) => {
        e.target.getAttribute("class") !== "ui fluid container excerpt" && (a(!1), b(null), P(M));
      },
      onMouseEnter: (e) => {
        f && (a(!1), b(null), P(M));
      },
      style: { position: "relative" },
      children: [
        r.map((e, i) => {
          const s = m && m.index == i;
          return /* @__PURE__ */ d(
            "div",
            {
              className: "tooltip",
              onMouseOver: () => Y(i),
              onMouseOut: () => {
                P(i);
              },
              style: {
                left: s ? m.position[0] : 0,
                top: s ? m.position[1] : 0,
                position: "absolute",
                pointerEvents: f ? "none" : "all"
              },
              children: s && /* @__PURE__ */ d(
                "div",
                {
                  className: "tooltip",
                  style: {
                    backgroundColor: K(i),
                    color: dt(i)
                  },
                  children: /* @__PURE__ */ d(
                    Ct,
                    {
                      post: e,
                      as: rt,
                      style: s ? wt : Pt
                    },
                    e.slug
                  )
                }
              )
            }
          );
        }),
        /* @__PURE__ */ d("svg", { height: u, width: "100%", ref: O })
      ]
    }
  );
}, Ht = (T) => {
  const {
    "data-type": r,
    "data-taxonomy": v,
    "data-categories": L,
    "data-items": U,
    "data-height": H,
    "data-line-color": S = "#000",
    "data-config": u = "{}",
    "data-position": l = "middle",
    "data-line-width": W = "1",
    "data-margin-left": z = 50,
    "data-margin-top": E = 25,
    "data-margin-right": R = 50,
    "data-margin-bottom": C = 25,
    "data-font-size": k = 14,
    "data-title-width": $ = 100,
    "data-title-height": I = 50,
    "data-subtitle-width": N = 50,
    "data-subtitle-height": g = 20,
    "data-enable-title-popup": p = "false",
    "data-enable-circle-popup": A = "true",
    "data-enable-default-popup": f = "false",
    "data-close-popup-on-mouse-out": x = "false",
    editing: O,
    parent: J,
    unique: a
  } = T, m = T.intl.locale, _ = {
    unique: a || Math.random().toString(36).substring(2, 9),
    marginLeft: z,
    marginTop: E,
    marginRight: R,
    marginBottom: C,
    lineWidth: W,
    height: H,
    position: l,
    lineColor: decodeURIComponent(S),
    config: JSON.parse(decodeURIComponent(u)),
    fontSize: k,
    titleWidth: $,
    titleHeight: I,
    subtitleWidth: N,
    subtitleHeight: g,
    enableTitlePopup: p == !0 || p == "true",
    enableCirclePopup: A == !0 || A == "true",
    enableDefaultPopup: f == !0 || f == "true",
    closePopupOnMouseOut: x == !0 || x == "true"
  };
  return /* @__PURE__ */ d(
    rt,
    {
      style: { height: `${H}px` },
      className: `viz time line ${O ? "editing" : ""}`,
      fluid: !0,
      children: /* @__PURE__ */ d(
        yt,
        {
          locale: m,
          type: r,
          taxonomy: v,
          categories: L,
          store: "carousel_" + J + "_" + a,
          page: 1,
          perPage: U,
          children: /* @__PURE__ */ d(vt, { children: /* @__PURE__ */ d(Mt, { ..._ }) })
        }
      )
    }
  );
};
export {
  Ht as default
};
