import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import Logo from "react-styleguidist/lib/client/rsg-components/Logo";
import Version from "react-styleguidist/lib/client/rsg-components/Version";
import Styled from "react-styleguidist/lib/client/rsg-components/Styled";
import docConfig from "../config/doc-config.json";
import style from "./styleguidist.css";
const xsmall = "@media (max-width: 600px)";
const styles = _ref => {
  let {
    mq
  } = _ref;
  return {
    root: {
      backgroundColor: "red"
    },
    header: {
      height: 60,
      position: "absolute",
      top: 0,
      width: "100%",
      color: "#61849c",
      borderBottom: "2px solid #61849c",
      backgroundColor: "white"
    },
    bar: {
      display: "flex",
      alignItems: "center",
      height: "100%",
      [xsmall]: {
        flexDirection: "column",
        alignItems: "center"
      }
    },
    title: {
      fontFamily: "Avenir, Helvetica, Arial, sans-serif",
      fontSize: 20,
      marginLeft: "1.5em",
      color: "#61849c",
      fontWeight: "bold"
    },
    version: {
      padding: "10px 0 0 10px"
    },
    content: {
      marginTop: 60,
      height: "calc(100% - 60px)",
      position: "fixed",
      width: "100%"
    },
    scrollable: {
      overflowY: "scroll",
      height: "calc(100vh - 60px)"
    },
    main: {
      maxWidth: 1000,
      padding: [[15, 30]],
      paddingLeft: "230px",
      margin: [[0, "auto"]],
      [mq.small]: {
        padding: 15
      },
      display: "block"
    },
    components: {
      overflow: "auto" // To prevent the pane from growing out of the screen
    },
    sidebar: {
      backgroundColor: "#f5f5f5",
      border: "#e8e8e8 solid",
      borderWidth: "0 1px 0 0",
      position: "fixed",
      top: 60,
      left: 0,
      bottom: 0,
      width: "220px",
      overflow: "auto"
    },
    preview: {
      padding: "0!important"
    }
  };
};
export function StyleGuideRenderer(_ref2) {
  let {
    classes,
    children,
    version,
    toc,
    hasSidebar
  } = _ref2;
  const [apiKey, setApiKey] = useState();
  useEffect(() => {
    fetch("https://developer.geops.io/publickey").then(response => response.json()).then(data => {
      setApiKey(data.key);
    }).catch(() => {
      setApiKey("5cc87b12d7c5370001c1d6554840ecb89d2743d2b0aad0588b8ba7eb");
      // eslint-disable-next-line no-console
      console.error("Request to get the apiKey failed");
    });
  }, []);
  if (!apiKey) {
    return null;
  }

  // Makes apiKey accessible for all components.
  window.apiKey = apiKey;
  return /*#__PURE__*/React.createElement("div", {
    className: classes.root
  }, /*#__PURE__*/React.createElement("style", null, style), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("header", {
    className: classes.header
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.bar
  }, /*#__PURE__*/React.createElement(Logo, null, /*#__PURE__*/React.createElement("a", {
    className: classes.title,
    href: "index.html"
  }, docConfig.appName))))), /*#__PURE__*/React.createElement("div", {
    className: classes.content
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.scrollable
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.sidebar
  }, /*#__PURE__*/React.createElement("header", {
    className: classes.version
  }, version && /*#__PURE__*/React.createElement(Version, null, version)), hasSidebar ? toc : null), /*#__PURE__*/React.createElement("main", {
    className: classes.main
  }, children))), /*#__PURE__*/React.createElement("div", {
    id: "promo"
  }, /*#__PURE__*/React.createElement("a", {
    href: docConfig.githubRepo,
    target: "_blank",
    rel: "noopener noreferrer"
  }, /*#__PURE__*/React.createElement("div", {
    id: "promo-text"
  }, "Fork me on GitHub"))));
}
StyleGuideRenderer.propTypes = {
  classes: PropTypes.object.isRequired,
  children: PropTypes.node.isRequired,
  version: PropTypes.string,
  toc: PropTypes.node.isRequired,
  hasSidebar: PropTypes.bool.isRequired
};
export default Styled(styles)(StyleGuideRenderer);
//# sourceMappingURL=StyleGuide.js.map