import React from 'react'
import { Link, graphql } from 'gatsby'
import {
  mapEdgesToNodes,
  filterOutDocsWithoutSlugs,
  filterOutDocsPublishedInTheFuture,
} from '../lib/helpers'
import GraphQLErrorList from '../components/graphql-error-list'
import SEO from '../components/seo'
import Layout from '../containers/layout'
import Img from 'gatsby-image'
import tw, { theme, css } from 'twin.macro'
import Tilt from 'react-parallax-tilt'

export const query = graphql`
  query IndexPageQuery {
    site: sanitySiteSettings(_id: { regex: "/(drafts.|)siteSettings/" }) {
      title
      description
      keywords
    }
    file(relativePath: { eq: "ajmal.jpg" }) {
      childImageSharp {
        fluid(maxWidth: 1024, quality: 100) {
          ...GatsbyImageSharpFluid
        }
      }
    }
    posts: allSanityPost(
      limit: 6
      sort: { fields: [publishedAt], order: DESC }
      filter: { slug: { current: { ne: null } }, publishedAt: { ne: null } }
    ) {
      edges {
        node {
          id
          publishedAt
          mainImage {
            ...ImageWithPreview
            caption
            alt
          }
          title
          _rawExcerpt
          slug {
            current
          }
        }
      }
    }
  }
`

const IndexPage = (props) => {
  const { data, errors } = props

  if (errors) {
    return (
      <Layout>
        <GraphQLErrorList errors={errors} />
      </Layout>
    )
  }

  const site = (data || {}).site
  const postNodes = (data || {}).posts
    ? mapEdgesToNodes(data.posts)
        .filter(filterOutDocsWithoutSlugs)
        .filter(filterOutDocsPublishedInTheFuture)
    : []

  if (!site) {
    throw new Error(
      'Missing "Site settings". Open the studio at http://localhost:3333 and add some content to "Site settings" and restart the development server.'
    )
  }

  return (
    <Layout>
      <SEO title={site.title} description={site.description} />
      <div
        tw="grid h-screen"
        css={{
          gridTemplateColumns: '1fr min(80ch, calc(100% - 48px)) 1fr',
          gridRowGap: 8,
          '& > *': {
            gridColumn: 2,
          },
        }}
      >
        <div tw="mt-10 md:mt-0 align-middle md:place-self-center justify-between w-full">
          <div tw="flex flex-col-reverse md:flex-row md:items-center">
            <div tw="md:w-2/3 font-serif mt-8 md:mt-0 md:pr-8">
              <h1 tw="text-3xl lg:text-4xl xl:text-5xl font-semibold lg:font-semibold">
                Hi, I’m Ajmal 👋🏼
              </h1>
              <p tw="mt-2 prose lg:prose-lg xl:prose-xl">
                Always gearing myself to be in the flow state & play mode. Currently exploring
                living with meaningful productivity.
              </p>
              <div tw="mt-4 flex flex-col sm:flex-row text-center space-y-4 sm:space-y-0 sm:space-x-4">
                <Link to="/projects/">
                  <div
                    tw="rounded py-2 px-6 font-medium font-sans"
                    css={{
                      backgroundColor: `${theme`colors.accent`}`,
                      color: `var(--text-cta)`,
                      boxShadow:
                        '0 0 0 1px var(--color-primary), 0 1px 1px 1px var(--color-accent)',
                      '&:hover, &:focus': {
                        backgroundColor: `${theme`colors.primary`}`,
                      },
                    }}
                  >
                    View Projects
                  </div>
                </Link>
                <Link to="/notes/">
                  <div
                    tw="rounded py-2 px-6 font-medium font-sans"
                    css={{
                      backgroundColor: 'transparent',
                      color: `var(--text-stronger)`,
                      boxShadow: '0 0 0 1px var(--color-border), 0 1px 1px 1px var(--color-border)',
                      '&:hover, &:focus': {
                        backgroundColor: 'var(--bg-secondary)',
                      },
                      '&:focus': {
                        backgroundColor: 'var(--bg-secondary)',
                        borderRadius: 4,
                      },
                    }}
                  >
                    Read Notes
                  </div>
                </Link>
              </div>
            </div>
            <div tw="md:w-1/3 md:self-stretch">
              <Tilt
                tiltReverse={true}
                tiltMaxAngleX="5.0"
                tiltMaxAngleY="5.0"
                gyroscope={true}
                glareMaxOpacity="0.2"
                glareReverse={true}
                glareEnable={true}
              >
                <Img
                  tw="rounded-md max-w-xs mx-auto md:ml-auto"
                  fluid={data.file.childImageSharp.fluid}
                  alt="Ajmal Afif"
                />
              </Tilt>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  )
}

export default IndexPage
