import React, { Component } from 'react';
import _ from 'lodash';
import { Link } from '@reach/router';
import { loader } from 'graphql.macro';
import { Query } from 'react-apollo';

import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';

const AREA_STATS = loader('./areaStats.graphql');

const cells = [
  {
    key: 'area.name',
    name: 'Area Name',
  },
  {
    key: 'totalLoos',
    name: 'Loos',
  },
  {
    key: 'activeLoos',
    name: 'Active Loos',
  },
  {
    key: 'publicLoos',
    name: 'Public Loos',
  },
  {
    key: 'permissiveLoos',
    name: 'Permissive Loos',
  },
  {
    key: 'babyChangeLoos',
    name: 'Baby Changing',
  },
];

class AreaComparisonStats extends Component {
  constructor(props) {
    super(props);
    this.downloadCSV = this.downloadCSV.bind(this);
  }

  UNSAFE_componentWillReceiveProps(props) {
    if (!_.isEqual(props.location.query, this.props.location.query)) {
      // TODO - what do we do when we have a query string?
    }
  }

  render() {
    return (
      <div>
        <div
          style={{
            width: '100%',
            marginLeft: 'auto',
            marginRight: 'auto',
            textAlign: 'center',
          }}
        >
          <span style={{ position: 'relative' }}>
            {/* <RefreshIndicator size={150} top={20} left={0} status={this.state.refreshing ? 'loading' : 'hide'}/> */}
          </span>
        </div>
        <Table height={'600px'}>
          <TableHead>
            <TableRow>
              {_.map(cells, val => {
                return <TableCell key={'h_' + val.key}>{val.name}</TableCell>;
              })}
              <TableCell key={'h_listLink'} />
            </TableRow>
          </TableHead>
          <TableBody>
            <Query query={AREA_STATS}>
              {({ loading, error, data }) => {
                if (loading) return <h1>Loading area stats...</h1>;
                if (error) return <h1>Error fetching area stats: {error}</h1>;

                return data.areaStats.map((area, index) => (
                  <TableRow key={index}>
                    {cells.map(cell => (
                      <TableCell key={cell.key + 'c_' + index}>
                        {_.get(area, cell.key)}
                      </TableCell>
                    ))}

                    <TableCell key={'c_listLink_' + index}>
                      <Link to={`../../search?area_name=${area.area.name}`}>
                        view loos
                      </Link>
                    </TableCell>
                  </TableRow>
                ));
              }}
            </Query>
          </TableBody>
        </Table>
        {/* <Toolbar>
					<ToolbarGroup />
					<ToolbarGroup lastChild={true}>
						<ToolbarSeparator/>
						<RaisedButton
						  label="Download CSV"
						  labelPosition="before"
						  primary={true}
						  onClick={this.downloadCSV}
						  />
					</ToolbarGroup>
				</Toolbar> */}
      </div>
    );
  }
}

export default AreaComparisonStats;

@@ -898,106 +898,8 @@
 t %7B%0A
-  constructor(props) %7B%0A    super(props);%0A    this.downloadCSV = this.downloadCSV.bind(this);%0A  %7D%0A%0A
   UN
@@ -2744,304 +2744,8 @@
 le%3E%0A
-        %7B/* %3CToolbar%3E%0A%09%09%09%09%09%3CToolbarGroup /%3E%0A%09%09%09%09%09%3CToolbarGroup lastChild=%7Btrue%7D%3E%0A%09%09%09%09%09%09%3CToolbarSeparator/%3E%0A%09%09%09%09%09%09%3CRaisedButton%0A%09%09%09%09%09%09  label=%22Download CSV%22%0A%09%09%09%09%09%09  labelPosition=%22before%22%0A%09%09%09%09%09%09  primary=%7Btrue%7D%0A%09%09%09%09%09%09  onClick=%7Bthis.downloadCSV%7D%0A%09%09%09%09%09%09  /%3E%0A%09%09%09%09%09%3C/ToolbarGroup%3E%0A%09%09%09%09%3C/Toolbar%3E */%7D%0A
     

clear up after deprecating download