import React from "react"
import cx from "clsx"
import Markdown from "rsg-components/Markdown"
import Styled from "rsg-components/Styled"
import { worker } from "../../docs/mocks/browser"

worker.start()

const styles = ({
  color,
  fontFamily,
  fontSize,
  sidebarWidth,
  mq,
  space,
  maxWidth,
}) => ({
  root: {
    minHeight: "100vh",
    backgroundColor: color.baseBackground,
    ".dark &": {
      isolate: false,
      backgroundColor: "#232426",
    },
    "& a": {
      isolate: false,
      cursor: "pointer !important",
    }
  },
  hasSidebar: {
    paddingLeft: sidebarWidth,
    [mq.small]: {
      paddingLeft: 0,
    },
  },
  content: {
    maxWidth,
    padding: [[space[4], space[4]]],
    margin: [[0, "auto"]],
    display: "block",
    [mq.small]: {
      padding: space[2],
    },
    opacity: 0,
    animation: "$fade .3s ease .5s forwards",
  },
  "@keyframes fade": {
    to: { opacity: 1 },
  },
  sidebar: {
    backgroundColor: color.sidebarBackground,
    border: [[color.border, "solid"]],
    borderWidth: [[0, 1, 0, 0]],
    position: "fixed",
    top: 0,
    left: 0,
    bottom: 0,
    width: sidebarWidth,
    overflow: "auto",
    WebkitOverflowScrolling: "touch",
    [mq.small]: {
      position: "static",
      width: "auto",
      borderWidth: [[1, 0, 0, 0]],
      paddingBottom: space[0],
    },
    ".dark &": {
      isolate: false,
      backgroundColor: "#1e1e1e",
      borderColor: "#2f2f2f",
    },
  },
  footer: {
    display: "block",
    color: color.light,
    fontFamily: fontFamily.base,
    fontSize: fontSize.small,
  },
})

function StyleGuideRenderer({ classes, children, toc, hasSidebar }) {
  return (
    <div className={cx(classes.root, hasSidebar && classes.hasSidebar)}>
      <main className={classes.content}>
        {children}
        <footer className={classes.footer}>
          <Markdown
            text={`© 2019–${new Date().getFullYear()} ConvertKit Engineering`}
          />
        </footer>
      </main>
      {hasSidebar && <div className={classes.sidebar}>{toc}</div>}
    </div>
  )
}

export default Styled(styles)(StyleGuideRenderer)
