import useWindowSize from "../utils/resizeHook";
import WindowWidthType from "../utils/windowWidthType";

import "./kartografSplash.scss";

const KartografSplash = (props) => {
  const windowSize = useWindowSize();

  const iOS = () => {
    return (
      [
        "iPad Simulator",
        "iPhone Simulator",
        "iPod Simulator",
        "iPad",
        "iPhone",
        "iPod",
      ].includes(navigator.platform) ||
      // iPad on iOS 13 detection
      (navigator.userAgent.includes("Mac") && "ontouchend" in document)
    );
  };

  return (
    <div
      className={`fullscreen ${
        iOS() ? "ios" : ""
      } ${props.className ?? ""} ${props.show ? "" : "hidden"}`}
      style={{
        height:
          windowSize < WindowWidthType.MD
            ? window.screen.height + "px"
            : "100vh",
      }}
    >
      {props.children}
    </div>
  );
};

export default KartografSplash;
