import { FC, useState } from "react";
import Iframe from "react-iframe";

type ZammadWrapperProps = {
  url: string;
  hideSidebar?: boolean;
};

export const ZammadWrapper: FC<ZammadWrapperProps> = ({
  url,
  hideSidebar = true,
}) => {
  const [display, setDisplay] = useState("inherit");

  return (
    <Iframe
      id="link"
      url={url}
      width="100%"
      height="100%"
      frameBorder={0}
      styles={{ display }}
      onLoad={() => {
        const linkElement = document.querySelector("iframe");
        if (
          linkElement.contentDocument &&
          linkElement.contentDocument?.querySelector &&
          linkElement.contentDocument.querySelector("#navigation") &&
          linkElement.contentDocument.querySelector("body") &&
          linkElement.contentDocument.querySelector(".sidebar")
        ) {
          // @ts-ignore
          linkElement.contentDocument.querySelector("#navigation").style =
            "display: none";
          // @ts-ignore
          linkElement.contentDocument.querySelector("body").style =
            "font-family: Arial";

          if (hideSidebar) {
            // @ts-ignore
            linkElement.contentDocument.querySelector(".sidebar").style =
              "display: none";
          }
        }
        setDisplay("inherit");
      }}
    />
  );
};