import { useMediaQuery } from "@mui/material";
import { useTheme } from "@mui/material/styles";
import { StyleRoot } from "radium";
import React from "react";
import Display from "../../Display";
import IMPAd from "../../IMPAd";

const RollingLeaderBoards = (props) => {

  const [load, setLoad] = React.useState(true);

  const adHeight = {
    large: "90px",
    medium: "90px",
    small: "60px",
    xlDesktop: "250px",
    xlMobile: "100px",
  };

  const style = {
    marginBottom: "45px",
    // Adding media query..
    "@media only screen and (min-width: 960px) and (max-width: 1300px)": {
      marginBottom: "45px",
    },
    "@media only screen and (min-width: 0px) and (max-width: 600px)": {
      marginBottom: "30px",
    },
    "@media only screen and (min-width: 600px) and (max-width: 960px)": {
      marginBottom: "30px",
    },
  };

  const theme = useTheme();
  const smallmb = useMediaQuery(theme.breakpoints.between("xs", "sm")); //0 - 600
  const largemb = useMediaQuery(theme.breakpoints.between("sm", "md")); //600 - 960

  let timeout = 500;
  let adHeightType = props.adPosition === "top" ? ["xlDesktop"] : ["medium"];
  let adBlockHeight =
    props.adPosition === "top" ? adHeight["large"] : adHeight["medium"];
  if (smallmb || largemb) {
    adBlockHeight = adHeight["small"];
    adHeightType = "small";
  }
  const topStyle = {
    marginTop: "15px",
    height: adBlockHeight,
  };


  const refFunc = (node) => {
    if (node && load) {
      let script = document.createElement("script");
      script.innerHTML = `
      googletag.cmd.push(function () {
        let RollingLeaderBoard = googletag
          .defineSlot(
            "/2744311/Display/Display_Push/Leaderboard",
            [
              [970, 250],
              [970, 90],
              [728, 90],
              [320, 50],
              [320, 100],
              [300, 50],
            ],
            "div-RollingLeaderBoard${props.modId}"
          )
          .addService(googletag.pubads());
        googletag.enableServices();
        if (isMoatDataAvailable()) {
          requestAds();
          googletag.display("div-RollingLeaderBoard${props.modId}");
          googletag.pubads().refresh([RollingLeaderBoard]);
        } else {
          window["moatYieldReady"] = requestAds;
          googletag.display("div-RollingLeaderBoard${props.modId}");
          googletag.pubads().refresh([RollingLeaderBoard]);
        }
        RollingLeaderBoard.setTargeting("adpos", "${props.adPosition}");
      }); 
      `;

      node.appendChild(script);
      setLoad(false);
    }
  };

  return (
    <Display {...props} timeout={timeout}>
      <div
        style={{
          display: "flex",
          justifyContent: "center",
        }}
        id="rollingLeaderBoard"
      >
        <div
          style={{
            height: "300px",
            width: "100%",
            backgroundColor: "#ECEDEF",
            display: "flex",
            justifyContent: "center",
            marginBottom: "32px",
            marginTop: "32px",
          }}
        >
          <div
            style={{
              position: "sticky",
              maxHeight: "120px",
              display: "flex",
              justifyContent: "center",
              margin: "0px 0 16px 0",
              backgroundColor: "#ECEDEF",
              width: "100%",
              height: "100%",
              top: "30px",
            }}
          >
            <div style={style}>
              <IMPAd>
                <StyleRoot>
                  <div
                    id={`div-RollingLeaderBoard${props.modId}`}
                    ref={refFunc}
                  ></div>
                </StyleRoot>
              </IMPAd>
            </div>
          </div>
        </div>
      </div>
    </Display>
  );
};

export default RollingLeaderBoards;

如何创建可折叠广告位，以便在使用Google Publisher Tag没有可用广告时隐藏该广告位？我希望确保在成功加载广告之前不会显示代码块。此方法将有助于解决广告仍在加载时出现的可折叠元素问题。是否有可用的库或工具可以帮助解决此问题？任何指导或建议将不胜感激。