import { jsx as a, jsxs as at } from "react/jsx-runtime";
import { PostProvider as bt, PostConsumer as xt } from "@devgateway/wp-react-lib";
import Ct from "../connected-templates/PostIntro.js";
import { useRef as st, useState as F, useCallback as q, useLayoutEffect as wt } from "react";
import { Container as vt, Modal as G } from "semantic-ui-react";
import * as p from "d3";
import { useWindowDimensionsAndDevice as Tt } from "../../lib/hooks/window-dimensions.js";
import { useScreenOrientation as Pt } from "../../lib/hooks/screen-orientation.js";
const $t = {
  visibility: "visible",
  position: "relative",
  height: "auto",
  width: "auto"
}, Dt = 0, Wt = (T) => {
  let {
    posts: s,
    lineWidth: P,
    lineColor: $,
    config: c,
    marginLeft: U,
    marginTop: L,
    marginRight: J,
    marginBottom: N,
    fontSize: y,
    subtitleWidth: R,
    subtitleHeight: b,
    enableTitlePopup: D,
    enableCirclePopup: W,
    enableDefaultPopup: V,
    closePopupOnMouseOut: X,
    unique: u
  } = T;
  R = 250;
  const x = st(), H = st(), [I, h] = F(!1), [O, k] = F(0), [S, _] = F(null), { orientation: g } = Pt(), { width: Y, deviceType: f, height: C } = Tt({
    getDeviceType: !0,
    getHeight: !0
  }), B = q((t) => `circle${u}${t}`, [u]), ct = q((t) => `title${u}${t}`, [u]), dt = (t) => {
    var i;
    return ((i = c[t]) == null ? void 0 : i.size) || 10;
  }, pt = ({ content: t, isOpen: i, style: l }) => {
    const m = (n) => (n = n.replace(
      /<ul(.*?)>/g,
      '<ul class="has-white-color has-text-color has-standard-14-font-size" style="list-style-type:disc !important; list-style: initial !important; padding-left:20px; color:#fefefe;">'
    ), n = n.replace(/<a(.*?)>/g, '<a$1 style="color:#fefefe;">'), n);
    return /* @__PURE__ */ at(
      G,
      {
        open: i,
        onClose: () => h(!1),
        size: "fullscreen",
        closeIcon: !0,
        centered: !0,
        style: {
          maxHeight: "80vh",
          overflowY: "auto",
          padding: "0.5rem",
          ...l
        },
        children: [
          /* @__PURE__ */ a(G.Header, { style: { ...l, borderBottom: "none" } }),
          /* @__PURE__ */ a(
            G.Content,
            {
              className: "styled-list-content",
              style: { ...l },
              dangerouslySetInnerHTML: {
                __html: m(
                  t.props.children.props.post.content.rendered
                )
              }
            }
          )
        ]
      },
      `${t.props.children.key}modal`
    );
  }, K = (t) => {
    var i;
    return (i = c[t]) == null ? void 0 : i.circleColor;
  }, Q = (t) => c[t].titleColor, Z = (t) => c[t].lineColor, tt = (t) => c[t].tooltipFontColor || "#fff", ut = (t) => c[t].readMoreLabel, et = q((t, i) => {
    t.preventDefault();
    const l = 260, m = 50;
    let n = [0, 0];
    if (t) {
      const w = t.target.getBoundingClientRect(), A = t.target.closest(".time").getBoundingClientRect(), r = w.left - A.left, v = w.top + A.top;
      n = [r + l, v + m];
      const M = 400;
      w.left + r + M + l > window.innerWidth && (n[0] = r - M * 0.6);
    }
    h(!0), _({ data: i, id: i.id, position: n }), gt(i.id);
  }, []), ft = () => {
    h(!1);
  }, ht = (t) => {
    p.selectAll(`#${B(t)}`).style("stroke", "none").style("fill", K(t)), p.selectAll(`#label${t}`).style("font-weight", "normal");
  }, gt = (t) => {
    ht(Dt), p.selectAll(`#${B(t)}`).style("stroke", K(t)).style("fill", "#fff"), p.selectAll(`#label${t}`).style("font-weight", "bold");
  };
  return wt(() => {
    var nt;
    const t = {
      top: L,
      bottom: N
    }, i = x.current.clientWidth, l = H.current.clientWidth;
    l > 0 && k(l);
    const m = C, n = {
      mobile: "75",
      tablet: "150",
      midTablet: "150",
      laptop: "150"
    }, w = {
      mobile: "250",
      tablet: "350",
      midTablet: "350",
      laptop: "400"
    }, A = {
      mobile: 20,
      tablet: 30,
      midTablet: 30,
      laptop: 40
    }, r = p.scaleLinear().domain([0, s.length - 1]).range([t.top, m - t.bottom]), v = p.select(x.current);
    v.selectAll("*").remove(), v.attr("width", i).attr("height", m);
    const M = p.line(), mt = [
      [0, r(0)],
      [0, r(s.length - 1)]
    ], yt = M(mt);
    let ot = `translate(${n[f]},0)`;
    ((nt = process.env.REACT_APP_THEME) == null ? void 0 : nt.startsWith("cd")) && (ot = `translate(${n[f]},20)`);
    const z = v.append("g").attr("transform", ot);
    $ = "#E4E5EA", P = 6, z.append("path").attr("d", yt).attr("stroke-width", P).attr("stroke", $).attr("class", "timeline-path"), z.selectAll(".circle").data(s).enter().append("circle").attr("id", (o, e) => B(e)).attr("cx", 0).attr("class", "timeline-circle").attr("cy", (o, e) => r(e)).attr("r", (o, e) => dt(e)).style("fill", (o, e) => {
      var d;
      return ((d = c[e]) == null ? void 0 : d.circleColor) || "#000";
    }).style("cursor", W ? "pointer" : "default").on("click", (o, e) => {
      o.preventDefault(), W && et(o, e);
    }), z.selectAll(".title").data(s).enter().append("foreignObject").attr("x", A[f]).attr("y", (o, e) => r(e) - Number.parseInt(b) / 2).attr("width", Number.parseInt(w[f])).attr("height", Number.parseInt(b)).attr("class", "timeline-title").append("xhtml:div").attr("id", (o, e) => ct(e)).style("font-size", `${Number.parseInt(y) + 1}px`).style("color", (o, e) => Q(e)).style("font-weight", "bold").style("line-height", "1.2rem").style("text-align", "left").style("cursor", D ? "pointer" : "default").style("overflow", "hidden").style("display", "-webkit-box").style("-webkit-line-clamp", "2").style("-webkit-box-orient", "vertical").style("text-overflow", "ellipsis").style("overflow-wrap", "break-word").html((o, e) => {
      const d = ut(e);
      let E = o.title.rendered;
      return d && (E += `<br><span style="font-size:${Number.parseInt(y) - 3}px;color:${Q(
        e
      )};text-decoration:underline;text-underline-offset:3px">${d}</span>`), E;
    }).each(function(o, e) {
      const d = p.select(this.parentNode);
      setTimeout(() => {
        const E = this.getBoundingClientRect(), rt = Math.min(
          E.height,
          Number.parseInt(b) * 2
        );
        d.attr("height", rt), d.attr("y", r(e) - rt / 2);
      }, 0);
    }).on("click", (o, e, d) => {
      o.preventDefault(), D && et(o, e);
    });
    const it = +y + 1, lt = 60, j = it * 0.9;
    z.selectAll(".year-fo").data(s).enter().append("foreignObject").attr("class", "year-fo").attr("x", -70).attr("y", (o, e) => r(e) - j / 2).attr("width", lt).attr("height", j).append("xhtml:div").style("display", "flex").style("align-items", "center").style("justify-content", "flex-end").style("width", `${lt}px`).style("height", `${j}px`).style("font-size", `${it}px`).style("line-height", "1em").style("font-weight", "400").style("color", "#4C4D50").html((o) => o.meta_fields.subtitle);
  }, [f, g, C]), /* @__PURE__ */ at(
    "div",
    {
      className: "time line",
      style: { position: "relative" },
      ref: H,
      children: [
        s.filter((t) => S && S.id === t.id).map((t) => {
          const i = t.slug || "unknown-slug", l = s.indexOf(t);
          return /* @__PURE__ */ a(
            pt,
            {
              isOpen: I,
              content: /* @__PURE__ */ a(
                "div",
                {
                  style: {
                    backgroundColor: Z(l),
                    color: tt(l)
                  },
                  children: /* @__PURE__ */ a(
                    Ct,
                    {
                      post: t,
                      style: $t
                    },
                    i
                  )
                }
              ),
              closeTooltip: ft,
              style: {
                backgroundColor: Z(l),
                color: tt(l)
              }
            },
            `${i}_modal`
          );
        }),
        /* @__PURE__ */ a("svg", { height: C, width: O, ref: x, style: { overflow: "visible" } })
      ]
    },
    u + f + g
  );
}, Et = (T) => {
  const {
    "data-type": s,
    "data-taxonomy": P,
    "data-categories": $,
    "data-items": c,
    "data-height": U,
    "data-line-color": L = "#000",
    "data-config": J = "{}",
    "data-position": N = "middle",
    "data-line-width": y = "1",
    "data-margin-left": R = 50,
    "data-margin-top": b = 25,
    "data-margin-right": D = 50,
    "data-margin-bottom": W = 25,
    "data-font-size": V = 14,
    "data-title-width": X = 100,
    "data-title-height": u = 50,
    "data-subtitle-width": x = 250,
    "data-subtitle-height": H = 60,
    "data-enable-title-popup": I = "false",
    "data-enable-circle-popup": h = "true",
    "data-enable-default-popup": O = "false",
    "data-close-popup-on-mouse-out": k = "false",
    editing: S,
    parent: _,
    unique: g
  } = T, Y = T.intl.locale, C = {
    unique: g || Math.random().toString(36).substring(2, 9),
    marginLeft: R,
    marginTop: b,
    marginRight: D,
    marginBottom: W,
    lineWidth: y,
    height: U,
    position: N,
    lineColor: decodeURIComponent(L),
    config: JSON.parse(decodeURIComponent(J)),
    fontSize: V,
    titleWidth: X,
    titleHeight: u,
    subtitleWidth: x,
    subtitleHeight: H,
    enableTitlePopup: I == !0 || I == "true",
    enableCirclePopup: h == !0 || h == "true",
    enableDefaultPopup: O == !0 || O == "true",
    closePopupOnMouseOut: k == !0 || k == "true"
  };
  return /* @__PURE__ */ a(
    vt,
    {
      style: { height: "auto" },
      className: `viz time line ${S ? "editing" : ""} mobile`,
      fluid: !0,
      children: /* @__PURE__ */ a(
        bt,
        {
          locale: Y,
          type: s,
          taxonomy: P,
          categories: $,
          store: `carousel_${_}_${g}`,
          page: 1,
          perPage: c,
          children: /* @__PURE__ */ a(xt, { children: /* @__PURE__ */ a(Wt, { ...C }) })
        }
      )
    }
  );
};
export {
  Et as default
};
