import { jsx as i } from "react/jsx-runtime";
import { calculateMarginForReactContainer as d } from "./index-ActionBar.helpers.js";
import { ActionBarFooter as p } from "./index-ActionBarFooter.js";
import { ActionBarMessage as g } from "./index-ActionBarMessage.js";
import { ComponentContainer as B } from "./index-ComponentContainer.js";
import { useRef as h, useState as C, useLayoutEffect as w, useEffect as E } from "react";
import y from "./index-ActionBar.module.scss.js";
const x = (c) => {
  const {
    show: s,
    templateProps: n
  } = c, t = h(null), [e, l] = C();
  function o() {
    var a;
    const r = document.getElementsByClassName("react-container")[0];
    if (r !== void 0) {
      l(r.getBoundingClientRect());
      const u = ((a = t == null ? void 0 : t.current) == null ? void 0 : a.clientHeight) ?? 0;
      r.style.marginBottom = d(u);
    }
  }
  w(() => (o(), window.addEventListener("resize", o), () => window.removeEventListener("resize", o)), []), E(() => {
    s && t && t.current && o();
  }, [t, s]);
  const m = () => ({
    left: e == null ? void 0 : e.left,
    width: e == null ? void 0 : e.width
  }), f = () => {
    if (!n)
      return null;
    const {
      template: r
    } = n;
    return r === "message" ? i(g, {
      ...n
    }) : r === "footer" ? i(p, {
      ...n
    }) : null;
  };
  return i(B, {
    innerRef: t,
    testId: "ActionBar_Container",
    className: y.container,
    style: {
      transform: s ? "translateY(0)" : "translateY(100%)",
      ...m()
    },
    children: i(f, {})
  });
};
export {
  x as ActionBar
};
