content: import React from 'react';
  import emotion from 'preact-emotion';
  import { graphql, compose } from 'react-apollo';
  import gql from 'graphql-tag';
  import remcalc from 'remcalc';
  
  import { Grid, Row, Col } from 'preact-emotion-flexboxgrid';
  
  import {
    ServiceCategory,
    ServiceName,
    ServiceDescription,
    Service,
    Overlay,
    Anchor,
    Sup
  } from '../components';
  
  const Container = emotion('div')`
    padding-top: ${remcalc(30)};
    background-color: #ffffff;
  `;
  
  const CategoryWrapper = emotion(Col)`
    margin-bottom: ${remcalc(48)};
  `;
  
  const sliptTag = tag => tag.split('=').map(n => n.replace(/'/g, ''));
  
  const isNew = tag => sliptTag(tag)[0] === 'is-new';
  
  const formatTag = tag => {
    if (sliptTag(tag)[0] === 'note') {
      return sliptTag(tag)[1];
    }
  
    if (sliptTag(tag)[0] === 'is-new') {
      return 'New!';
    }
  
    return tag;
  };
  
  const GetProducts = gql`
    {
      categories {
        name
        services {
          name
          slug
          url
          tags
          description
        }
      }
    }
  `;
  
  const Services = ({ expanded = false, categories = [], loading }) =>
    expanded ? (
      <Overlay>
        <Container>
          <Grid>
            <Row>
              {!loading &&
                categories.map(({ name, services }) => (
                  <CategoryWrapper xs={12} sm={6} md={4}>
                    <ServiceCategory>{name}</ServiceCategory>
                    {services.map(({ name, description, url, tags }) => (
                      <Service>
                        <ServiceName>
                          <Anchor href={url}>{name}</Anchor>
                          {tags
                            ? tags.map(tag => (
                                <Sup new={isNew(tag)}>{formatTag(tag)}</Sup>
                              ))
                            : null}
                        </ServiceName>
                        <ServiceDescription>{description}</ServiceDescription>
                      </Service>
                    ))}
                  </CategoryWrapper>
                ))}
            </Row>
          </Grid>
        </Container>
      </Overlay>
    ) : null;
  
  export default compose(
    graphql(GetProducts, {
      options: () => ({
        ssr: false
      }),
      props: ({ data: { categories = [], loading = false, error = null } }) => ({
        categories,
        loading,
        error
      })
    })
  )(Services);
  