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

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

export const ZammadWrapper: FC<ZammadWrapperProps> = ({
  path,
  hideSidebar = true,
}) => {
  const origin = typeof window !== 'undefined' && window.location.origin
    ? window.location.origin
    : '';
  const [display, setDisplay] = useState("hidden");
  const url = `${origin}/zammad${path}`;
  console.log({ origin, path, url });

  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");
        }

      }}
    />
  );
};