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 [display, setDisplay] = useState("hidden");
  const url = `https://redaranj-bookish-tribble-56jwjx5wh4j4w-8003.preview.app.github.dev/zammad${path}`;
  console.log({ base: process.env.LINK_URL, 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");
      }}
    />
  );
};