import React from "react"
import ReactDOM from 'react-dom';
import Helmet from "react-helmet"
import styled from "styled-components"

import SEO from "../components/SEO/SEO"
import config from "../../data/SiteConfig"
import CtaButton from '../components/CtaButton'
import Navigation from '../components/Layout/Navigation'
import mountCodeExample from '../utils/mountCodeExample';
import loadScript from '../utils/loadScript';
import { babelURL } from '../site-constants';
import {colors, media, sharedStyles} from '../theme';


class Index extends React.Component {
  constructor(props, context) {
    super(props, context);
    const { data } = props;

    const code = data.code.edges.reduce((map, {node}) => {
      map[node.id] = JSON.parse(node.internal.contentDigest);

      return map;
    }, {});

    const examples = data.examples.edges.map(({node}) => ({
      content: node.html,
      id: node.fields.slug.replace(/^.+\//, '').replace('.html', '').replace('/', ''),
      title: node.frontmatter.title,
    }));

    this.state = {
      code,
      examples,
    };
  }

  componentDidMount() {
    const {code, examples} = this.state;

    examples.forEach(({id}) => {
      renderExamplePlaceholder(id);
    });

    function mountCodeExamples() {
      examples.forEach(({id}) => {
        mountCodeExample(id, code[id]);
      });
    }

    loadScript(babelURL).then(mountCodeExamples, error => {
      console.error('Babel failed to load.');

      mountCodeExamples();
    });
  }

  render() {
    const postEdges = this.props.data.examples.edges;
    const { examples } = this.state;
    return (
      <div className="index-container">
        <Helmet title={config.siteTitle} />
        <SEO postEdges={postEdges} />
        <main>
          <IndexHeadContainer>
            <Navigation />
            <Hero>
              <img src={config.siteLogo} width='150px' />
              <h1>{config.siteTitle}</h1>
              <h4>{config.siteDescription}</h4>
            </Hero>
          </IndexHeadContainer>
          <BodyContainer>
            <h2>A Gatsby Template for Content</h2>
            <p>Made for modern documentation sites. Table of Contents automatically generated from markdown files. </p>
            <CtaButton to={'/lesson-one'}>See Your First Post</CtaButton>
          </BodyContainer>

          <section css={sectionStyles}>
              <div id="examples">
                {examples.map((example, index) => (
                  <div
                    key={index}
                    css={{
                      marginTop: 40,

                      '&:first-child': {
                        marginTop: 0,
                      },

                      [media.greaterThan('xlarge')]: {
                        marginTop: 80,
                      },
                    }}>
                    <h3 css={headingStyles}>{example.title}</h3>
                    <div dangerouslySetInnerHTML={{__html: example.content}} />
                    <div id={example.id} />
                  </div>
                ))}
              </div>
            </section>
        </main>
      </div>
    );
  }
}

export default Index;

const sectionStyles = {
  marginTop: 20,
  marginBottom: 15,

  [media.greaterThan('medium')]: {
    marginTop: 60,
    marginBottom: 65,
  },
};

const headingStyles = {
  '&&': {
    marginBottom: 20,
  },
};

function renderExamplePlaceholder(containerId) {
  ReactDOM.render(
    <h4>Loading code example...</h4>,
    document.getElementById(containerId),
  );
}



const IndexHeadContainer = styled.div`
  background: ${props => props.theme.brand};
  padding: ${props => props.theme.sitePadding};
  text-align: center;
`

const Hero = styled.div`
  padding: 50px 0;
  & > h1 {
    font-weight: 600;
  }
`

const BodyContainer = styled.div`
  padding: ${props => props.theme.sitePadding};
  max-width: ${props => props.theme.contentWidthLaptop};
  margin: 0 auto;
`