import { jsx as t, jsxs as d } from "react/jsx-runtime";
import z, { useState as y, useEffect as I } from "react";
import { Container as A, Accordion as P, Icon as x, Grid as T, Segment as F, Label as _ } from "semantic-ui-react";
import { PostProvider as q, PostConsumer as H, MediaProvider as M, MediaConsumer as L, PostIcon as N, PostContent as E, MediaContext as O, PostTitle as R } from "@devgateway/wp-react-lib";
import W from "../connected-templates/PostIntro.js";
import { useWindowDimensionsAndDevice as j } from "../../lib/hooks/window-dimensions.js";
import { connect as B } from "react-redux";
const G = ({ post: n, onClick: f, active: s, moreLabel: l, mediaData: u }) => {
  const h = n._embedded ? n._embedded["wp:featuredmedia"] : null, o = u ? u.source_url : h && h.length > 0 ? h[0].source_url : null;
  return /* @__PURE__ */ d("div", { className: "cover", style: { backgroundImage: `url(${o || ""})` }, children: [
    /* @__PURE__ */ t(W, { post: n }),
    s ? /* @__PURE__ */ d(_, { onClick: f, children: [
      /* @__PURE__ */ t(x, { name: "arrow alternate circle left outline", size: "large" }),
      " Back "
    ] }) : /* @__PURE__ */ d(_, { onClick: f, children: [
      /* @__PURE__ */ t(x, { name: "search", size: "large" }),
      " ",
      l
    ] })
  ] });
}, U = ({ post: n }) => {
  const l = new DOMParser().parseFromString(n.content.rendered, "text/html").querySelector("figure");
  return l ? /* @__PURE__ */ t("div", { style: {
    flex: "0 0 40px"
  }, dangerouslySetInnerHTML: { __html: l.outerHTML } }) : null;
}, V = ({ posts: n, width: f, height: s, color: l, moreLabel: u, closeLabel: h }) => {
  const [o, m] = y(null), [p, v] = y(!1), [C, b] = y([0, 0]), a = l.split(","), g = (i) => {
    p ? (v(!1), m(i)) : (m(i), v(!0));
  };
  return I(() => {
    o && b([window.scrollX, window.scrollY]), o == null && window.scrollTo(C[0], C[1]);
  }, [o]), I(() => {
    window.setTimeout(() => {
      if (window.location.hash) {
        const i = window.location.hash.substr(1), e = document.getElementById(i);
        e && n && n.map((r) => r.slug).indexOf(i) > -1 && (m(i), e.scrollIntoView({ behavior: "auto", block: "start" }));
      }
    }, 0);
  }, [n]), /* @__PURE__ */ t(A, { fluid: !0, className: "featured tabs", style: { minHeight: `${s}px` }, children: /* @__PURE__ */ t(T, { stackable: !0, columns: o != null ? 1 : n == null ? void 0 : n.length, className: "desktop", children: n == null ? void 0 : n.map((i, e) => {
    var r;
    return /* @__PURE__ */ d(z.Fragment, { children: [
      /* @__PURE__ */ d(
        T.Column,
        {
          style: o == null ? { display: "block", visibility: "visible", backgroundColor: a[e] } : { display: "none", visibility: "hidden" },
          children: [
            /* @__PURE__ */ t("a", { id: i.slug }),
            /* @__PURE__ */ t(M, { id: i.featured_media, children: /* @__PURE__ */ t(O.Consumer, { children: ({ media: c }) => /* @__PURE__ */ t(G, { post: i, mediaData: c, moreLabel: u, onClick: () => g(i.slug) }) }) })
          ]
        }
      ),
      /* @__PURE__ */ d(
        T.Column,
        {
          className: "expanded",
          style: o != i.slug ? { display: "none", visibility: "hidden" } : { display: "block", visibility: "visible" },
          children: [
            /* @__PURE__ */ d(F, { style: { backgroundColor: a[e] }, children: [
              ((r = i.meta_fields) == null ? void 0 : r.icon) && /* @__PURE__ */ t(M, { id: i.meta_fields ? i.meta_fields.icon[0] : null, children: /* @__PURE__ */ t(L, { children: /* @__PURE__ */ t(N, {}) }) }),
              /* @__PURE__ */ t(R, { as: "h2", post: i, className: "has-standard-36-font-size has-white-color" }),
              /* @__PURE__ */ t(_, { className: "closeIcon", onClick: () => m(null), children: /* @__PURE__ */ t(x, { name: "times circle outline", size: "large" }) })
            ] }),
            /* @__PURE__ */ t(
              E,
              {
                as: "div",
                fluid: !0,
                post: i,
                style: { maxHeight: `calc(${s}px - 150px)` }
              }
            ),
            /* @__PURE__ */ d(_, { className: "closeIconText", style: { backgroundColor: `${a[e]}` }, onClick: () => m(null), children: [
              /* @__PURE__ */ t(x, { name: "times circle outline", size: "large" }),
              " ",
              h || "Close",
              " "
            ] })
          ]
        }
      )
    ] }, i.slug);
  }) }) });
}, Y = ({ posts: n, activeItem: f, setActive: s, color: l }) => {
  const [u, h] = y(n.findIndex((e) => e.slug === f)), [o, m] = y(null), p = l.split(","), v = () => {
    var e;
    return ((e = window.screen.orientation) == null ? void 0 : e.type) || (window.innerWidth > window.innerHeight ? "landscape-primary" : "portrait-primary");
  }, [C, b] = y(v()), a = () => {
    setTimeout(() => {
      b(v());
    }, 100);
  }, g = (e, r, c) => {
    document.querySelectorAll(e).forEach((k) => {
      k.querySelector(r) && k.classList.add(c);
    });
  };
  I(() => {
    if (o) {
      const e = o.getBoundingClientRect().top + window.scrollY;
      window.scrollTo({
        top: e,
        behavior: "smooth"
      });
    }
    g(".ui.fluid.container.viz.featured.tabs", ".accordion .accordion-post-ft-title", "has-accordion-title"), g(".ui.fluid.container.viz.featured.tabs", ".accordion .accordion-post-vft-content", "has-accordion-content"), g(".ui.fluid.container.viz.featured.tabs", "blockquote", "has-blockquote"), g(".ui.fluid.container.viz.featured.tabs", ".vt-accordion-post-intro figure", "has-vt-accordion-figure"), g(".ui.fluid.container.viz.featured.tabs", ".content.active.accordion-post-content .wp-block-columns", "has-wp-block-columns");
  }, [o]), I(() => (window.screen.orientation && window.screen.orientation.addEventListener(
    "change",
    a
  ), window.addEventListener("resize", a), () => {
    window.removeEventListener("resize", a), window.screen.orientation && window.screen.orientation.removeEventListener(
      "change",
      a
    );
  }), []);
  const i = (e, r) => {
    const { index: c } = r, w = u === c ? -1 : c;
    h(w), s(n[c].slug), w !== -1 && m(e.currentTarget);
  };
  return /* @__PURE__ */ t(P, { fluid: !0, styled: !0, children: n.map((e, r) => {
    var w;
    const c = (w = e.meta_fields) != null && w.icon ? e.meta_fields.icon[0] : null;
    return /* @__PURE__ */ d(z.Fragment, { children: [
      /* @__PURE__ */ t(
        P.Title,
        {
          active: u === r,
          index: r,
          onClick: i,
          style: { backgroundColor: p[r] },
          children: /* @__PURE__ */ d("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, children: [
            /* @__PURE__ */ d("div", { style: { display: "flex", alignItems: "center" }, children: [
              c && /* @__PURE__ */ t(M, { id: c, children: /* @__PURE__ */ t(L, { children: /* @__PURE__ */ t(N, { className: "icon" }) }) }),
              !c && /* @__PURE__ */ t(U, { post: e }),
              /* @__PURE__ */ t("p", { className: "accordion-post-ft-title", dangerouslySetInnerHTML: { __html: e.title.rendered }, style: { marginLeft: "10px" } })
            ] }),
            /* @__PURE__ */ t(x, { name: "chevron down" })
          ] })
        }
      ),
      /* @__PURE__ */ t(P.Content, { className: "accordion-post-ft-content", active: u === r, children: /* @__PURE__ */ t(E, { post: e }) })
    ] }, e.id);
  }) });
}, X = (n) => {
  var S;
  let {
    "data-width": f,
    "data-height": s,
    "data-type": l,
    "data-taxonomy": u,
    "data-categories": h,
    "data-items": o,
    "data-color": m,
    "data-use-scrolls": p,
    "data-read-more-label": v = "READ More",
    "data-close-label": C = "Close",
    "data-preview-mode": b = "Desktop",
    editing: a,
    parent: g,
    unique: i,
    pageModuleProps: e
  } = n;
  const r = n.intl.locale;
  e != null && e.editing && (e != null && e.previewMode) && (a = e.editing, b = e.previewMode);
  const c = p == "true", { width: w } = j(), k = w <= 1250, $ = b !== "Desktop" && a, D = k && !a;
  return /* @__PURE__ */ t(
    A,
    {
      className: `viz featured tabs ${a ? "editing" : ""} ${c ? "scrollable" : ""}`,
      fluid: !0,
      children: /* @__PURE__ */ t(
        q,
        {
          locale: r,
          type: l,
          taxonomy: u,
          categories: h,
          store: `tabbedposts_${g}_${i}`,
          page: 1,
          perPage: o,
          children: /* @__PURE__ */ t(H, { children: $ || D ? /* @__PURE__ */ t(
            Y,
            {
              posts: o,
              activeItem: (S = o == null ? void 0 : o[0]) == null ? void 0 : S.slug,
              color: m,
              setActive: () => {
              }
            }
          ) : /* @__PURE__ */ t(
            V,
            {
              moreLabel: v,
              closeLabel: C,
              color: m,
              width: f,
              height: s
            }
          ) })
        }
      )
    }
  );
}, J = (n, f) => {
  const s = n.getIn([
    "data",
    "pageModuleProps"
  ]), l = {};
  return s && (l.pageModuleProps = s), l;
}, K = {}, re = B(J, K)(X);
export {
  re as default
};
