import React, { useEffect } from "react"
import { graphql } from "gatsby"

import Base from '../components/Base'
import SEO from "../components/Seo"
import PostList from "../components/PostList"
import init, { greet } from "snake_game"

type articleListType = {
  data: {
    allMdx: {
      edges: [articleType]
    }
  }
}

type articleType = {
  node: {
    excerpt: string,
    frontmatter: {
      archive: boolean,
      date: string,
      slug: string,
      title: string
    }
  }
}

const IndexPage = (props: articleListType) => {
  const postEdges = props.data.allMdx.edges;

  const initWasm = () => {
    init().then(_ => {
      console.log("MANN");
      console.log(greet("BRUH"));
    })
  }

  useEffect(() => {
    initWasm()
  }, [])

  return (
    <Base>
      <PostList postEdges={postEdges}/>
    </Base>
  )
}

export default IndexPage;

export const Head = () => {
  return (
    <SEO title="Home" 
      children="" 
      description=""
    />
  )
}

export const pageQuery = graphql`
  query IndexQuery {
    allMdx(limit: 1000, sort: {frontmatter: {date: DESC}}) {
      edges {
        node {
          excerpt
          frontmatter {
            slug
          }
          frontmatter {
            title
            date
            archive
          }
        }
      }
    }
  }
`;