import React from "react"
import { Link, graphql } from "gatsby"
import { Box, Avatar, Heading, Text } from "@chakra-ui/core"
import styled from "@emotion/styled"
import Bio from "../components/bio"
import Layout from "../components/layout"
import SEO from "../components/seo"
import { remarkForm } from "gatsby-tinacms-remark"

const BlogText = styled.section`
  position: relative;
  min-height: 230px;
  line-height: 1.6em;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  padding-left: 60px;
  padding-right: 60px;
  padding-bottom: 20px;
  background: rgb(255, 255, 255);

  h2 {
    font-weight: 600;
    color: #11103e;
    margin-top: 48px;
    margin-bottom: 16px;
    font-size: 40px;
    line-height: 42px;
    letter-spacing: 0;
  }

  h3 {
    font-weight: 600;
    color: #11103e;
    margin-top: 20px;
    margin-bottom: 16px;
    font-size: 30px;
    line-height: 42px;
    letter-spacing: 0;
  }

  h4 {
    font-weight: 500;
    color: #11103e;
    margin-top: 20px;
    margin-bottom: 16px;
    font-size: 24px;
    line-height: 42px;
    letter-spacing: 0;
  }

  p {
    margin-top: 0;
    margin-bottom: 16px;
  }

  @media (max-width: 1170px) {
    padding: 4vw 7vw 0;
  }
  @media (max-width: 800px) {
    font-size: 1rem;
    padding: 1vw 7vw 0;
    h2 {
      font-size: 32px;
    }
  }
  @media (max-width: 500px) {
    padding: 0vw 7vw 0;
  }
`

class BlogPostTemplate extends React.Component {
  render() {
    const post = this.props.data.markdownRemark
    const siteTitle = this.props.data.site.siteMetadata.title
    const { previous, next } = this.props.pageContext

    return (
      <>
        <Box
          bg="white"
          boxShadow="0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
        >
          <Box px={{ md: "2rem" }}>
            <Box
              display="flex"
              flexWrap="wrap"
              justifyContent="space-between"
              alignItems="center"
              px="1rem"
            >
              <Box py={5}>
                <Heading as="h2" size="lg">
                  About Opensource.Builders
                </Heading>
                <Text fontSize="md" fontWeight={400} color="#939fae" mt={1}>
                  On a mission to find great open-source software
                </Text>
              </Box>
            </Box>
          </Box>
        </Box>
        <SEO
          title={post.frontmatter.title}
          description={post.frontmatter.description || post.excerpt}
        />
        <Box
          display="flex"
          flexWrap="wrap"
          ml="auto"
          mr="auto"
          maxWidth="60rem"
          py={4}
          px={2}
          // p="2.625rem 1.3125rem"
        >
          <Box
            width="100%"
            boxShadow="0px 1px 4px rgba(0, 0, 0, 0.16)"
            borderRadius="3px"
            bg="white"
          >
            <article>
              <BlogText dangerouslySetInnerHTML={{ __html: post.html }} />
              <footer>
                <Bio />
              </footer>
            </article>
          </Box>
        </Box>
      </>
    )
  }
}

/**
 * This object defines the form for editing blog post.
 */
const BlogPostForm = {
  /**
   * The list of fields tell us what the form looks like.
   */
  fields: [
    /**
     * This is a field definition. There are many types of
     * components available, including:
     *
     * * text
     * * textarea
     * * toggle
     * * date
     * * markdown
     * * color
     * * group
     * * group-list
     * * blocks
     */
    {
      //
      name: "frontmatter.title",
      component: "text",
      label: "Title",
      required: true,
    },
    { name: "frontmatter.date", component: "date", label: "Date" },
    {
      name: "frontmatter.description",
      component: "textarea",
      label: "Textarea",
    },
    { name: "rawMarkdownBody", component: "markdown", label: "Body" },
  ],
}

/**
 * The `remarkForm` higher order component wraps the `BlogPostTemplate`
 * and generates a new form from the data in the `markdownRemark` query.
 */
export default remarkForm(BlogPostTemplate, BlogPostForm)

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
        author
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      excerpt(pruneLength: 160)
      html
      ...TinaRemark
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
      }
    }
  }
`