import { jsx } from "react/jsx-runtime";
import { memo, useRef, useMemo } from "react";
import styled from "styled-components";
import { buildLogRocketQueryParams } from "@elliemae/pui-logrocket";
import { IFRAME_CONTAINER_ID_PREFIX } from "./const.js";
const Div = styled.div`
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
`;
const Iframe = styled.iframe`
  flex-grow: 1;
  border: none;
  margin: 0;
  padding: 0;
  display: block;
  height: 100%;
`;
const IFrame = memo(
  ({ id, name: title, src, sandbox, onFrameReady }) => {
    const frameRef = useRef(null);
    const sandboxProps = sandbox ? { sandbox } : {};
    const srcWithParams = useMemo(
      () => `${src}${src.includes("?") ? "&" : "?"}${buildLogRocketQueryParams()}`,
      [src]
    );
    return /* @__PURE__ */ jsx(Div, { children: /* @__PURE__ */ jsx(
      Iframe,
      {
        id: `${IFRAME_CONTAINER_ID_PREFIX}${id}`,
        ref: frameRef,
        title,
        src: srcWithParams,
        "data-testid": `${IFRAME_CONTAINER_ID_PREFIX}${id}`,
        ...sandboxProps,
        onLoad: () => frameRef?.current?.contentDocument && onFrameReady(frameRef.current.contentDocument)
      }
    ) });
  }
);
export {
  IFrame
};
