import { jsx as e, jsxs as b } from "react/jsx-runtime";
import F, { useState as p, useRef as ne, useEffect as T } from "react";
import { Container as S, Accordion as E, Icon as oe, Menu as z, Grid as _, Label as G, Button as ie } from "semantic-ui-react";
import { PostProvider as re, PostConsumer as q, MediaProvider as V, MediaConsumer as U, PostIcon as Y, PostLabel as J } from "@devgateway/wp-react-lib";
import { injectIntl as ae } from "react-intl";
import { connect as le } from "react-redux";
import K from "../connected-templates/PostIntro.js";
import { useWindowDimensionsAndDevice as ce } from "../../lib/hooks/window-dimensions.js";
const se = ({ posts: t, activeItem: s, setActive: i, showLabels: n }) => t ? t.map((r) => /* @__PURE__ */ e(
  z.Item,
  {
    onClick: () => i(r.slug),
    className: r.slug === s ? "active" : "",
    children: n ? /* @__PURE__ */ e(J, { post: r }) : /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: r.title.rendered } }) })
  },
  r.id
)) : null, de = ({
  posts: t,
  activeItem: s,
  setActive: i,
  showIcons: n,
  showLabels: r
}) => {
  const l = t.length;
  return t ? t.map((c) => {
    var h, w;
    return (h = c._embedded) != null && h["wp:featuredmedia"] && c._embedded["wp:featuredmedia"][0].source_url, /* @__PURE__ */ e(
      _.Column,
      {
        className: (c.slug === s ? "active" : "") + (n ? " has-icon" : ""),
        children: /* @__PURE__ */ b(
          ie,
          {
            onClick: () => i(c.slug),
            className: `nav  ${l === 1 ? "one" : ""}`,
            children: [
              n && /* @__PURE__ */ e(
                V,
                {
                  id: (w = c.meta_fields) != null && w.icon ? c.meta_fields.icon[0] : null,
                  children: /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(Y, { className: "icon" }) })
                }
              ),
              r ? /* @__PURE__ */ e(J, { post: c }) : /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(
                "span",
                {
                  dangerouslySetInnerHTML: { __html: c.title.rendered }
                }
              ) })
            ]
          }
        )
      },
      c.id
    );
  }) : null;
}, Q = ({ posts: t, activeItem: s }) => (T(() => {
  const i = document.querySelector(".ui.container.content-tab");
  i && (i.scrollTop = 0);
}, [s]), t ? t.map((i) => {
  let n = {};
  return i.slug !== s ? n = {
    position: "absolute",
    left: "-3000px",
    width: "auto",
    height: "0px",
    overflow: "hidden",
    visibility: "hidden"
  } : n = {
    visibility: "visible",
    position: "relative",
    width: "auto"
  }, /* @__PURE__ */ e(K, { as: S, fluid: !0, post: i, style: n }, i.slug);
}) : null), ue = ({ posts: t, activeItem: s, setActive: i }) => {
  const [n, r] = p(
    t.findIndex((o) => o.slug === s)
  ), [l, c] = p(null), h = ne(null), [w, A] = p(window.innerWidth <= 1250);
  T(() => {
    if (l) {
      const o = l.getBoundingClientRect().top + window.scrollY;
      window.scrollTo({
        top: o,
        behavior: "smooth"
      });
    }
  }, [l]);
  const v = () => {
    var o;
    return ((o = window.screen.orientation) == null ? void 0 : o.type) || (window.innerWidth > window.innerHeight ? "landscape-primary" : "portrait-primary");
  }, [m, L] = p(v()), g = () => {
    setTimeout(() => {
      L(v()), A(window.innerWidth <= 1250);
    }, 100);
  }, P = (o) => {
    setTimeout(() => {
      var d;
      const u = o.querySelectorAll(
        ".accordion .legends.container.has-standard-12-font-size.bottom, .legends.container.items-section"
      );
      if (u.length !== 0)
        for (const a of u) {
          const x = a.closest(".ui.fluid.container.content"), f = x ? x.querySelector(".data-source") : null;
          if (!f || a.offsetParent === null || f.offsetParent === null || a.offsetHeight === 0 || f.offsetHeight === 0)
            continue;
          const I = f.getBoundingClientRect(), D = a.getBoundingClientRect(), X = window.getComputedStyle(f), H = window.getComputedStyle(a), Z = Number.parseFloat(X.marginTop) || 0, ee = Number.parseFloat(H.marginBottom) || 0, M = D.bottom + ee, W = I.top - Z;
          if (M > W) {
            const C = M - W;
            f.style.marginTop = `${C + 20}px`;
          }
          const N = (d = a.closest(
            ".wp-block-column.is-layout-flow.wp-block-column-is-layout-flow"
          )) == null ? void 0 : d.nextElementSibling;
          if (N) {
            const C = N.getBoundingClientRect(), k = window.getComputedStyle(N), $ = Number.parseFloat(k.marginTop) || 0, y = C.top - $;
            if (M > y) {
              const j = M - y;
              N.style.marginTop = `${j + 20}px`;
            }
          }
          const R = a.closest(".chart.container");
          if (R) {
            const C = R.getBoundingClientRect(), k = window.getComputedStyle(R), $ = Number.parseFloat(k.marginBottom) || 0, y = C.bottom + $, j = Number.parseFloat(H.marginTop) || 0, O = D.top - j;
            if (O < y) {
              const te = y - O;
              a.style.marginTop = `${te + 20}px`;
            }
          }
        }
    }, 10);
  };
  T(() => (window.screen.orientation && window.screen.orientation.addEventListener(
    "change",
    g
  ), window.addEventListener("resize", g), () => window.removeEventListener("resize", g)), []), T(() => {
    let o;
    const u = [];
    return n !== -1 && (o = setTimeout(() => {
      document.querySelectorAll(".accordion").forEach((a) => P(a));
    }, 0)), () => {
      clearTimeout(o), u.forEach((d) => d.disconnect());
    };
  }, [n, w, m]);
  const B = (o, u) => {
    const { index: d } = u, a = n === d ? -1 : d;
    r(a), i(t[d].slug), a !== -1 && c(o.currentTarget);
  };
  return /* @__PURE__ */ e(E, { fluid: !0, styled: !0, children: t.map((o, u) => {
    var a;
    const d = (a = o.meta_fields) != null && a.icon ? o.meta_fields.icon[0] : null;
    return /* @__PURE__ */ b(F.Fragment, { children: [
      /* @__PURE__ */ e(
        E.Title,
        {
          active: n === u,
          index: u,
          onClick: B,
          children: /* @__PURE__ */ b(
            "div",
            {
              style: {
                display: "flex",
                alignItems: "center",
                justifyContent: "space-between",
                width: "100%"
              },
              children: [
                /* @__PURE__ */ b("div", { style: { display: "flex", alignItems: "center" }, children: [
                  d && /* @__PURE__ */ e(V, { id: d, children: /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(Y, { className: "icon" }) }) }),
                  /* @__PURE__ */ e(
                    "span",
                    {
                      dangerouslySetInnerHTML: { __html: o.title.rendered },
                      style: { marginLeft: d ? "10px" : "0" }
                    }
                  )
                ] }),
                /* @__PURE__ */ e(oe, { name: "chevron down" })
              ]
            }
          )
        }
      ),
      /* @__PURE__ */ e(
        E.Content,
        {
          className: "accordion-post-content",
          active: n === u,
          children: /* @__PURE__ */ e("div", { ref: h, children: /* @__PURE__ */ e(K, { post: o, as: S, fluid: !0 }) })
        }
      )
    ] }, o.id);
  }) });
}, me = ({ posts: t, showLabels: s, height: i }) => {
  const [n, r] = p(t ? t[0].slug : null);
  return T(() => {
    setTimeout(() => {
      if (window.location.hash) {
        const l = window.location.hash.substr(1), c = document.getElementById(l);
        c && t.map((h) => h.slug).indexOf(l) > -1 && (r(l), c.scrollIntoView({ behavior: "auto", block: "start" }));
      }
    }, 0);
  }, [t]), /* @__PURE__ */ b(F.Fragment, { children: [
    t.map((l) => /* @__PURE__ */ e("anchor", { id: l.slug }, l.slug)),
    /* @__PURE__ */ e(z, { className: "tabbed posts", text: !0, children: /* @__PURE__ */ e(se, { showLabels: s, posts: t, setActive: r, activeItem: n }) }),
    /* @__PURE__ */ e(S, { className: "content-tab", style: { height: `${i}px` }, children: /* @__PURE__ */ e(Q, { posts: t, activeItem: n }) })
  ] });
}, he = ({ posts: t, showLabels: s, showIcons: i, height: n }) => {
  const [r, l] = p(t ? t[0].slug : null);
  return /* @__PURE__ */ e(F.Fragment, { children: /* @__PURE__ */ b(_, { stackable: !0, className: "tabbed posts", columns: t.length, style: { height: n + "px" }, children: [
    /* @__PURE__ */ e(de, { showIcons: i, showLabels: s, posts: t, activeItem: r, setActive: l }),
    /* @__PURE__ */ e(_.Row, { style: { height: `${n}px` }, children: /* @__PURE__ */ e(_.Column, { width: 16, className: "content", children: /* @__PURE__ */ e(S, { className: "content-tab", style: { height: `${n}px` }, children: /* @__PURE__ */ e(Q, { className: "content-tab", posts: t, activeItem: r }) }) }) })
  ] }) });
}, ge = (t) => {
  var I;
  let {
    "data-type": s,
    "data-taxonomy": i,
    "data-categories": n,
    "data-items": r,
    "data-theme": l = "light",
    "data-show-icons": c,
    "data-use-scrolls": h,
    "data-show-labels": w,
    "data-height": A,
    "data-preview-mode": v = "Desktop",
    pageModuleProps: m,
    parent: L,
    editing: g,
    unique: P
  } = t;
  m != null && m.previewMode && (m != null && m.editing) && (v = m.previewMode, g = m.editing);
  const B = t.intl.locale, o = h === "true", u = o ? A : void 0, { width: d } = ce(), a = d <= 1024, x = v !== "Desktop" && g, f = a && !g;
  return /* @__PURE__ */ e(S, { className: `viz tabbed posts ${g ? "editing" : ""} ${o ? "scrollable" : ""}`, fluid: !0, children: /* @__PURE__ */ e(
    re,
    {
      locale: B,
      type: s,
      taxonomy: i,
      categories: n,
      store: `tabbedposts_${L}_${P}`,
      page: 1,
      perPage: r,
      children: /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(q, { children: f || x ? /* @__PURE__ */ e(ue, { posts: r, activeItem: (I = r[0]) == null ? void 0 : I.slug, setActive: () => {
      } }) : l === "light" ? /* @__PURE__ */ e(me, { height: u, showLabels: w === "true" }) : /* @__PURE__ */ e(
        he,
        {
          height: u,
          showLabels: w === "true",
          showIcons: c === "true"
        }
      ) }) })
    }
  ) });
}, fe = (t, s) => {
  const i = t.getIn([
    "data",
    "pageModuleProps"
  ]), n = {};
  return i && (n.pageModuleProps = i), n;
}, we = {}, Ie = le(fe, we)(ae(ge));
export {
  Ie as default
};
