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

import { makeStyles } from "@material-ui/core/styles"
import { Container, Typography, Grid } from "@material-ui/core"
import Section from "@components/Section"
import Technology from "./Technology"

const useStyles = makeStyles(theme => ({
  hide: {
    [theme.breakpoints.down("md")]: {
      display: "none",
    },
  },
}))

function AboutMe() {
  const classes = useStyles()
  const data = useStaticQuery(graphql`
    {
      allIcons: allFile(filter: { absolutePath: { regex: "/technologies/" } }) {
        edges {
          node {
            relativePath
            childImageSharp {
              id
              fixed(height: 45, quality: 100) {
                ...GatsbyImageSharpFixed
              }
            }
          }
        }
      }
    }
  `)

  const findIcon = path => {
    const edge = data.allIcons.edges.find(img => img.node.relativePath === path)
    if (edge) {
      return edge.node.childImageSharp.fixed
    }
    return {}
  }

  return (
    <Section>
      <Container>
        <Typography align="center" variant="h2" gutterBottom>
          Technologies / tools I use
        </Typography>
        <Grid container spacing={2} alignItems="stretch">
          <Grid item className={classes.hide} lg={1}></Grid>
          <Grid item xs={6} sm={4} md={2} lg={1}>
            <Technology
              fixed={findIcon("technologies/html5.png")}
              name="HTML"
            />
          </Grid>
          <Grid item className={classes.hide} lg={1}></Grid>
          <Grid item xs={6} sm={4} md={2} lg={1}>
            <Technology fixed={findIcon("technologies/css.png")} name="CSS" />
          </Grid>
          <Grid item className={classes.hide} lg={1}></Grid>
          <Grid item xs={6} sm={4} md={2} lg={1}>
            <Technology fixed={findIcon("technologies/scss.png")} name="SCSS" />
          </Grid>
          <Grid item className={classes.hide} lg={1}></Grid>
          <Grid item xs={6} sm={4} md={2} lg={1}>
            <Technology
              fixed={findIcon("technologies/js.png")}
              name="JavaScript"
            />
          </Grid>
          <Grid item className={classes.hide} lg={1}></Grid>
          <Grid item xs={6} sm={4} md={2} lg={1}>
            <Technology
              fixed={findIcon("technologies/typescript.png")}
              name="TypeScript"
            />
          </Grid>
          <Grid item className={classes.hide} lg={1}></Grid>
          <Grid item xs={6} sm={4} md={2} lg={1}>
            <Technology
              fixed={findIcon("technologies/react.png")}
              name="React"
            />
          </Grid>

          <Grid item xs={6} sm={4} md={2} lg={1}>
            <Technology
              fixed={findIcon("technologies/gatsby.png")}
              name="Gatsby"
            />
          </Grid>
          <Grid item className={classes.hide} lg={1}></Grid>
          <Grid item xs={6} sm={4} md={2} lg={1}>
            <Technology
              fixed={findIcon("technologies/nextjs.png")}
              name="Next.JS"
            />
          </Grid>
          <Grid item className={classes.hide} lg={1}></Grid>
          <Grid item xs={6} sm={4} md={2} lg={1}>
            <Technology fixed={findIcon("technologies/jest.png")} name="Jest" />
          </Grid>
          <Grid item className={classes.hide} lg={1}></Grid>
          <Grid item xs={6} sm={4} md={2} lg={1}>
            <Technology
              fixed={findIcon("technologies/express.png")}
              name="Express"
            />
          </Grid>
          <Grid item className={classes.hide} lg={1}></Grid>
          <Grid item xs={6} sm={4} md={2} lg={1}>
            <Technology
              fixed={findIcon("technologies/strapi.png")}
              name="Strapi"
            />
          </Grid>
          <Grid item className={classes.hide} lg={1}></Grid>
          <Grid item xs={6} sm={4} md={2} lg={1}>
            <Technology
              fixed={findIcon("technologies/ghost.png")}
              name="Ghost"
            />
          </Grid>
          <Grid item className={classes.hide} lg={1}></Grid>

          <Grid item className={classes.hide} lg={1}></Grid>
          <Grid item xs={6} sm={4} md={2} lg={1}>
            <Technology
              fixed={findIcon("technologies/graphql.png")}
              name="GraphQL"
            />
          </Grid>
          <Grid item className={classes.hide} lg={1}></Grid>
          <Grid item xs={6} sm={4} md={2} lg={1}>
            <Technology
              fixed={findIcon("technologies/golang.png")}
              name="Golang"
            />
          </Grid>
          <Grid item className={classes.hide} lg={1}></Grid>
          <Grid item xs={6} sm={4} md={2} lg={1}>
            <Technology
              fixed={findIcon("technologies/gqlgen.png")}
              name="gqlgen"
            />
          </Grid>
          <Grid item className={classes.hide} lg={1}></Grid>
          <Grid item xs={6} sm={4} md={2} lg={1}>
            <Technology
              fixed={findIcon("technologies/golang.png")}
              name="Gin"
            />
          </Grid>
          <Grid item className={classes.hide} lg={1}></Grid>
          <Grid item xs={6} sm={4} md={2} lg={1}>
            <Technology
              fixed={findIcon("technologies/postgresql.png")}
              name="PostgreSQL"
            />
          </Grid>
          <Grid item className={classes.hide} lg={1}></Grid>
          <Grid item xs={6} sm={4} md={2} lg={1}>
            <Technology
              fixed={findIcon("technologies/docker.png")}
              name="Docker"
            />
          </Grid>
        </Grid>
      </Container>
    </Section>
  )
}

export default AboutMe