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 {
  DatacenterPlace,
  DatacenterRegion,
  Datacenter,
  Overlay
} from '../components';

const Container = emotion('div')`
  background-color: #ffffff;
`;

const TitleContainer = emotion('div')`
  background-color: ${props => props.theme.background};
`;

const RegionContainer = emotion('div')`
  padding-top: ${remcalc(18)};
  padding-bottom: ${remcalc(24)};
`;

const getDatacenters = gql`
  {
    regions @client {
      name
      slug
    }
    places @client {
      name
      slug
      region
    }
    datacenters @client {
      name
      slug
      place
    }
  }
`;

const Datacenters = ({ regions = [] }) => (
  <Overlay>
    {regions.map(({ name, slug, places }) => (
      <div key={slug}>
        <TitleContainer>
          <Grid>
            <Row>
              <Col>
                <DatacenterRegion>{name}</DatacenterRegion>
              </Col>
            </Row>
          </Grid>
        </TitleContainer>
        <Container>
          <Grid>
            <RegionContainer>
              <Row>
                {places.map(({ name, slug, datacenters }) => (
                  <Col key={slug} xs={12} md={6} lg={3}>
                    <DatacenterPlace>{name}</DatacenterPlace>
                    {datacenters.map(({ name, slug }) => (
                      <Datacenter key={slug}>{name}</Datacenter>
                    ))}
                  </Col>
                ))}
              </Row>
            </RegionContainer>
          </Grid>
        </Container>
      </div>
    ))}
  </Overlay>
);

export default compose(
  graphql(getDatacenters, {
    props: ({ data }) => {
      const {
        regions = [],
        places = [],
        datacenters = [],
        loading = false,
        error = null
      } = data;

      const _regions = regions.map(({ slug, ...region }) => ({
        ...region,
        places: places
          .filter(({ region }) => region === slug)
          .map(({ slug, ...place }) => ({
            ...place,
            datacenters: datacenters.filter(({ place }) => place === slug),
            slug
          })),
        slug
      }));

      return { regions: _regions, loading, error };
    }
  })
)(Datacenters);