import React from "react"
import { FormattedMessage, FormattedHTMLMessage, Link, useIntl, injectIntl } from "gatsby-plugin-intl"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"

import head from "../images/index/head.png"
import "../styles/main.css"
import "../styles/bootstrap.min.css"
import {Jumbotron, Button} from "react-bootstrap"

const IndexPage = ({ data }) => {
  const intl = useIntl()
  const lang = intl.locale
  var news = ""
  if ( lang==="ru" ) { news = data.ru_posts.edges; } 
  else if ( lang==="en" ) { news = data.en_posts.edges; }
  return(
    <Layout>
      <SEO lang={lang} title={intl.formatMessage({ id: "title" })} />

    {/* --------------------------------- */}
      <Jumbotron>
        <img src={head} width="90%" className="center-block" alt="head" />
        <hr/>
        <h3 style = {{color: `rgb(18,64,171)`}}><FormattedMessage id="jumbotron.labintro"/></h3>
        <p id="lead"><FormattedMessage id="jumbotron.lead"/></p>
        <FormattedHTMLMessage id="jumbotron.list" />
        <Button variant="success" id="jt"><Link to="./about"><FormattedMessage id="jumbotron.about" /></Link></Button>
    </Jumbotron> 
    {/* ------------------------------ */}
    <div className="row">
      <div className="col-lg-4">
          <h2><FormattedMessage id="more.nuclear_title" /></h2>
          <p> <FormattedMessage id="more.nuclear_body" /> </p>
          <Button variant="primary" id="more"><Link to="/projects/physics"><FormattedMessage id="more.nuclear_more" /></Link></Button>
      </div>
      <div className="col-lg-4">
          <h2><FormattedMessage id="more.education_title" /></h2>
          <p> <FormattedMessage id="more.education_body" /></p>
          <Button variant="primary" id="more"><Link to="/projects/education"><FormattedMessage id="more.education_more" /></Link></Button>
      </div>
      <div className="col-lg-4">
          <h2><FormattedMessage id="more.software_title" /></h2>
          <p><FormattedMessage id="more.software_body" /></p> 
          <Button variant="primary" id="more"><Link to="/projects/software"><FormattedMessage id="more.software_more" /></Link></Button>
      </div>
    </div>
    <hr style={{marginBottom: `50px`}}/>
    {/* --------------------------------- */}
    <h1 style={{textAlign: `center`}}><FormattedMessage id="more.news"/></h1>
      { news.map(({node}) => {
          const title = node.frontmatter.title; 
          const date = node.frontmatter.date;  
          console.log() 
          return (
            <div className = "card" style={{marginBottom: `15px`, borderRadius: `0px`, boxShadow: `0 2px 2px #A2A2A2`}}>
            <div className = "card-body">
              <h2 className = "title">
              {title}<span id="date">{date}</span>
              </h2>
                <p
                  dangerouslySetInnerHTML = {{
                    __html: node.frontmatter.description || node.html,
                  }}
                />
            </div>
            </div>
          )
        })}
    </Layout>
)
}

export default injectIntl(IndexPage)

export const query = graphql`
  query {
    ru_posts: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "post"}, published: {eq: true}, language: {eq: "ru"}}},
                      sort: {fields: [frontmatter___date], order: DESC}, limit: 3 ) 
    {
      edges{
        node{
            html
            frontmatter {
              date(formatString: "DD.MM.YYYY")
              title
              language
            }
          }
      }
    }

    en_posts: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "post"}, published: {eq: true}, language: {eq: "en"}}},
                      sort: {fields: [frontmatter___date], order: DESC}, limit: 3 ) 
      {
        edges{
          node{
            html
            frontmatter {
              date(formatString: "DD.MM.YYYY")
              title
              language
            }
          }
        }
      }


  }`