import React, { useEffect, useState } from "react";
import { graphql, Script } from "gatsby";
import config from '../../../data/site-config';
import Base from "../../components/Base";
import SEO from "../../components/seo";
import { MDXProvider } from '@mdx-js/react';
import './styles.scss';

const Comment = ({post_id}) => {
  return (
    <>
      <Script data-isso="//comments.nochill.in/"
        src="//comments.nochill.in/js/embed.min.js" 
        id={post_id}
        />

      <section id="isso-thread">
        <noscript>Javascript needs to be activated to view comments.</noscript>
      </section>
    </>
  ) 
}

const Layout = ({ data, children }) => {
  const [loadComment, setLoadComment] = useState(false);
  
  const post = data.mdx.frontmatter;

  useEffect(() => {
    setLoadComment(true)
  }, [])
  return (
    <Base>
      <div className="post template">
        <SEO title={`${post.title} | ${config.siteTitle}`} />
        <div className="post page">
          <div className="article figure">
            <div className="HeaderContainer">
              <small className="sub">
                {post.date}
              </small>
              <h1 className="title">
                {post.title}
              </h1>
            </div>
            <MDXProvider>
              {children}
            </MDXProvider>
          </div>
        </div>
      </div>
        <Comment post_id={post.title}/>
    </Base>
  )
}

export const pageQuery = graphql`
query($id: String) {
  mdx(id: { eq: $id }) {
    frontmatter {
      title
      date
    }
  }
}
`;

export default Layout;