import { jsx as r, jsxs as S } from "react/jsx-runtime";
import K, { useState as M, useEffect as L, useRef as q, useLayoutEffect as U } from "react";
import { Container as F, Accordion as j, Icon as X } from "semantic-ui-react";
import { PostProvider as J, PostConsumer as Y, MediaProvider as G, MediaConsumer as Q, PostIcon as Z, PostContent as O } from "@devgateway/wp-react-lib";
import { connect as ee } from "react-redux";
import H from "../connected-templates/PostIntro.js";
const te = ({
  posts: i,
  activeItem: d,
  setActive: p,
  colors: g
}) => {
  const [m, f] = M(
    i.findIndex((n) => n.slug === d)
  ), [c, w] = M(null), l = (n, o, s) => {
    document.querySelectorAll(n).forEach((t) => {
      t.querySelector(o) && t.classList.add(s);
    });
  };
  L(() => {
    if (c) {
      const n = c.getBoundingClientRect().top + window.scrollY;
      window.scrollTo({
        top: n,
        behavior: "smooth"
      });
    }
    l(
      ".ui.fluid.container.viz.featured.tabs",
      ".accordion",
      "has-accordion"
    ), l(
      ".ui.fluid.container.viz.featured.tabs",
      "blockquote",
      "has-blockquote"
    ), l(
      ".ui.fluid.container.viz.featured.tabs",
      ".accordion .accordion-post-ft-title",
      "has-accordion-title"
    ), l(
      ".ui.fluid.container.viz.featured.tabs",
      ".accordion .accordion-post-vft-content",
      "has-accordion-content"
    ), l(
      ".ui.fluid.container.viz.featured.tabs",
      ".vt-accordion-post-intro figure",
      "has-vt-accordion-figure"
    ), l(
      ".ui.fluid.container.viz.featured.tabs",
      ".content.active.accordion-post-content .wp-block-columns",
      "has-wp-block-columns"
    );
  }, [c]), L(() => {
    let n;
    const o = [], s = (e) => {
      setTimeout(() => {
        var h;
        const t = e.querySelectorAll(
          ".accordion .legends.container.has-standard-12-font-size.bottom, .legends.container.items-section:not(.legends.container.top .items-section)"
        );
        if (t.length !== 0)
          for (const u of t) {
            if (u.closest(".legends.container.top"))
              continue;
            const P = u.closest(
              ".ui.fluid.container.content"
            ), v = P ? P.querySelector(".data-source") : null;
            if (!v || u.offsetParent === null || v.offsetParent === null || u.offsetHeight === 0 || v.offsetHeight === 0)
              continue;
            const A = v.getBoundingClientRect(), y = u.getBoundingClientRect();
            if (y.top === 0 || y.bottom === 0 || A.top === 0 || Math.abs(y.top) > 1e4 || Math.abs(A.top) > 1e4)
              continue;
            const B = window.getComputedStyle(v), T = window.getComputedStyle(u), _ = parseFloat(B.marginTop) || 0, $ = parseFloat(T.marginBottom) || 0, E = y.bottom + $, R = A.top - _;
            if (E > R) {
              const a = E - R;
              v.style.marginTop = `${a + 20}px`;
            }
            const x = (h = u.closest(
              ".wp-block-column.is-layout-flow.wp-block-column-is-layout-flow"
            )) == null ? void 0 : h.nextElementSibling;
            if (x) {
              const a = x.getBoundingClientRect(), b = window.getComputedStyle(x), N = Number.parseFloat(b.marginTop) || 0, k = a.top - N;
              if (E > k) {
                const z = E - k;
                x.style.marginTop = `${z + 20}px`;
              }
            }
            const I = u.closest(".chart.container");
            if (I) {
              const a = I.getBoundingClientRect(), b = window.getComputedStyle(I), N = Number.parseFloat(b.marginBottom) || 0, k = a.bottom + N, z = Number.parseFloat(T.marginTop) || 0, D = y.top - z;
              if (D < k) {
                const W = k - D, V = Math.min(W + 20, 200);
                u.style.marginTop = `${V}px`;
              }
            }
          }
      }, 150);
    };
    return m !== -1 && (n = setTimeout(() => {
      document.querySelectorAll(".accordion").forEach((t) => s(t));
    }, 0)), () => {
      clearTimeout(n), o.forEach((e) => e.disconnect());
    };
  }, [m]);
  const C = (n, o) => {
    const { index: s } = o, e = m === s ? -1 : s;
    f(e), p(i[s].slug), e !== -1 && w(n.currentTarget);
  };
  return /* @__PURE__ */ r(j, { fluid: !0, styled: !0, children: i.map((n, o) => {
    var e;
    const s = (e = n.meta_fields) != null && e.icon ? n.meta_fields.icon[0] : null;
    return /* @__PURE__ */ S(K.Fragment, { children: [
      /* @__PURE__ */ r(
        j.Title,
        {
          active: m === o,
          index: o,
          onClick: (t) => C(t, { index: o }),
          style: { backgroundColor: g[`color_${o}`] },
          children: /* @__PURE__ */ S(
            "div",
            {
              style: {
                display: "flex",
                alignItems: "center",
                justifyContent: "space-between",
                width: "100%"
              },
              children: [
                /* @__PURE__ */ S("div", { style: { display: "flex", alignItems: "center" }, children: [
                  s && /* @__PURE__ */ r(G, { id: s, children: /* @__PURE__ */ r(Q, { children: /* @__PURE__ */ r(Z, { className: "icon" }) }) }),
                  /* @__PURE__ */ r(H, { post: n, className: "vt-accordion-post-intro" })
                ] }),
                /* @__PURE__ */ r(X, { name: "chevron down" })
              ]
            }
          )
        }
      ),
      /* @__PURE__ */ r(
        j.Content,
        {
          className: "accordion-post-content accordion-post-vft-content",
          active: m === o,
          children: /* @__PURE__ */ r(O, { post: n })
        }
      )
    ] }, n.id);
  }) });
}, ne = ({
  post: i,
  count: d,
  backgroundColor: p,
  active: g,
  dimensions: m,
  height: f,
  coverWidth: c,
  index: w,
  editing: l,
  clickToExpandLabel: C
}) => {
  const n = i._embedded ? i._embedded["wp:featuredmedia"] : null, [o, s] = M(!1), e = l ? d - w : 1;
  return /* @__PURE__ */ S("div", { className: "content-area", children: [
    /* @__PURE__ */ S(
      "div",
      {
        className: "cover",
        style: {
          width: `${c}px`,
          backgroundColor: p,
          backgroundImage: `url(${n ? n[0].source_url : ""})`
        },
        onMouseEnter: () => s(!0),
        onMouseLeave: () => s(!1),
        children: [
          /* @__PURE__ */ r(
            "div",
            {
              className: "rotator",
              style: {
                width: `${f}px`,
                transform: `translate(${c / 2}px, 0px) rotate(90deg)`
              },
              children: /* @__PURE__ */ r(H, { post: i })
            }
          ),
          /* @__PURE__ */ S("div", { className: "overlay-label-container", children: [
            /* @__PURE__ */ r(
              "div",
              {
                className: `overlay-label ${o && !g ? "visible" : ""}`,
                children: C || "CLICK TO EXPAND"
              }
            ),
            /* @__PURE__ */ r("div", { className: "arrow-svg" })
          ] })
        ]
      }
    ),
    /* @__PURE__ */ r(
      "div",
      {
        className: `collapsable-content ${g ? "expanded" : "collapsed"}`,
        style: {
          backgroundColor: "#f9f9f9",
          width: `${m.width - c * d}px`,
          marginLeft: `${c * e}px`
        },
        children: /* @__PURE__ */ r(O, { post: i })
      }
    )
  ] });
}, oe = ({
  editing: i,
  posts: d,
  height: p,
  colors: g,
  coverWidth: m,
  clickToExpandLabel: f
}) => {
  const [c, w] = M(null), l = q(null), [C, n] = M({ width: 0, height: 0 }), o = q(null), s = (e) => {
    c !== e && w(e);
  };
  return L(() => {
    d.length > 0 && c === null && i && w(d[0].slug);
  }, [d, c, i]), U(() => {
    var e, t, h, u;
    (e = l.current) != null && e.parentElement && n({
      width: i ? ((h = (t = l.current.parentElement) == null ? void 0 : t.parentElement) == null ? void 0 : h.offsetWidth) ?? 0 : ((u = l.current.parentElement) == null ? void 0 : u.offsetWidth) ?? 0,
      height: l.current.offsetHeight
    }), o.current && (o.current.style.overflow = i ? "visible" : "hidden");
  }, [i]), /* @__PURE__ */ r(
    F,
    {
      fluid: !0,
      className: "vertical featured tabs",
      ref: o,
      children: d == null ? void 0 : d.map((e, t) => {
        const h = c ? e.slug === c : t === 0;
        return /* @__PURE__ */ S(
          "div",
          {
            ref: l,
            onClick: () => s(e.slug),
            className: h ? "item expanded" : "item collapsed",
            style: {
              minHeight: `${p}px`,
              minWidth: `${m}px`
            },
            children: [
              /* @__PURE__ */ r("a", { id: e.slug }),
              /* @__PURE__ */ r(
                ne,
                {
                  editing: i,
                  coverWidth: m,
                  height: p,
                  backgroundColor: g[`color_${t}`],
                  count: d.length,
                  dimensions: C,
                  active: h,
                  post: e,
                  index: t,
                  clickToExpandLabel: f
                }
              )
            ]
          },
          e.slug
        );
      })
    }
  );
}, re = (i) => {
  var x, I;
  let {
    "data-height": d,
    "data-type": p,
    "data-taxonomy": g,
    "data-categories": m,
    "data-count": f,
    "data-colors": c,
    "data-cover-width": w = 50,
    "data-read-more-label": l = "READ More",
    "data-click-to-expand-label": C = "CLICK TO EXPAND",
    "data-preview-mode": n = "Desktop",
    editing: o,
    parent: s,
    unique: e,
    pageModuleProps: t
  } = i;
  t != null && t.previewMode && (t != null && t.editing) && (n = t.previewMode, o = t.editing);
  const h = i.intl.locale, u = m || "[]", [P, v] = M(
    (((x = window == null ? void 0 : window.visualViewport) == null ? void 0 : x.width) || window.innerWidth) <= 1365
  ), A = () => {
    var a, b, N;
    return ((a = window.screen.orientation) == null ? void 0 : a.type) || ((((b = window == null ? void 0 : window.visualViewport) == null ? void 0 : b.width) || window.innerWidth) > (((N = window == null ? void 0 : window.visualViewport) == null ? void 0 : N.height) || window.innerHeight) ? "landscape-primary" : "portrait-primary");
  }, [y, B] = M(A()), T = () => {
    setTimeout(() => {
      var a;
      B(A()), v(
        (((a = window == null ? void 0 : window.visualViewport) == null ? void 0 : a.width) || window.innerWidth) <= 1365
      );
    }, 100);
  };
  L(() => (window.screen.orientation && window.screen.orientation.addEventListener(
    "change",
    T
  ), window.addEventListener("resize", T), () => {
    window.removeEventListener("resize", T), window.screen.orientation && window.screen.orientation.removeEventListener(
      "change",
      T
    );
  }), []);
  const _ = (a) => o ? a : decodeURIComponent(a), $ = (a) => {
    if (!a) return null;
    try {
      return JSON.parse(_(a));
    } catch (b) {
      console.error(`error parsing value:${a}
 error:${b}`);
    }
    return null;
  }, E = n !== "Desktop" && o, R = P && !o;
  return /* @__PURE__ */ r(
    F,
    {
      style: { maxWidth: "100%" },
      className: `viz featured tabs ${o ? "editing" : ""}`,
      fluid: !0,
      children: /* @__PURE__ */ r(
        J,
        {
          type: p,
          locale: h,
          taxonomy: g,
          categories: $(u),
          store: `vertical_tabs${s}_${e}`,
          page: 1,
          perPage: f,
          children: /* @__PURE__ */ r(Y, { children: R || E ? /* @__PURE__ */ r(
            te,
            {
              posts: f,
              activeItem: (I = f == null ? void 0 : f[0]) == null ? void 0 : I.slug,
              colors: $(c),
              setActive: () => {
              }
            }
          ) : /* @__PURE__ */ r(
            oe,
            {
              editing: o,
              coverWidth: w,
              moreLabel: l,
              clickToExpandLabel: C,
              colors: $(c),
              height: d,
              posts: f
            }
          ) })
        }
      )
    },
    y + Math.random()
  );
}, ie = (i, d) => {
  const p = i.getIn(["data", "pageModuleProps"]), g = {};
  return p && (g.pageModuleProps = p), g;
}, ae = {}, pe = ee(ie, ae)(re);
export {
  pe as default
};
