import React, { Component } from 'react'
import MediaQuery from 'react-responsive'
import Paper from 'material-ui/Paper'
import CircularProgress from 'material-ui/CircularProgress'
import RaisedButton from 'material-ui/RaisedButton';
import { Link } from 'react-router'
import Counter from '../Statistics/Counter/Counter'

class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {data: undefined}
    this.getData()
  }

  getData() {
    if (!this.state.data) {
      return fetch(`https://inspire.data.gouv.fr/api/datasets/metrics`)
        .then((response) => response.json())
        .then((data) => {
          this.setState({data})
        })
        .catch((err) => {
          console.error(err)
        })
      }
  }

  render() {
    const loader =  <CircularProgress size={1.5} />
    const published = this.state.data ? <Counter value={this.state.data.published.public + this.state.data.published.private} label="Catalogs" color="green" icon="database"/> : loader

    const styles = {
      masthead: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'space-around',
        paddingTop: '1em',
        paddingBottom: '1em',
      },
      header: {
        tablet: {
          fontSize: '1em',
          fontWeight: 'normal',
          marginTop: '0.5em',
          textAlign: 'center',
          padding: '1em',
        },
        fontSize: '1.2em',
        fontWeight: 'normal',
        textAlign: 'center',
        padding: '1em',
      },
      paper: {
        display: 'inline-flex',
        flexDirection: 'column',
        alignItems: 'center',
        padding: '2em',
        marginTop: '0.5em',
      },
    }

    return (
      <div style={styles.masthead}>

        <div style={styles.header}>

          <MediaQuery style={styles.header} minWidth={701} component="h2">
              Votre organisation gère des <b>données géographiques</b> avec des outils compatibles Inspire et souhaite les rendre disponibles sans effort sur <a href="http://www.data.gouv.fr/fr/">data.gouv.fr</a>.
          </MediaQuery>
          <MediaQuery style={styles.header.tablet} maxWidth={700} component="h2">
              Votre organisation gère des <b>données géographiques</b> avec des outils compatibles Inspire et souhaite les rendre disponibles sans effort sur <a href="http://www.data.gouv.fr/fr/">data.gouv.fr</a>.
          </MediaQuery>

        </div>

        <Paper style={styles.paper} rounded={true} zDepth={2}>
          <h3>Catalogs</h3>
          {published}
          <Link to="catalogs">
            <RaisedButton label="Consult catalogs" primary={true} />
          </Link>
        </Paper>

      </div>
    )
  }
}

export default Home

@@ -814,24 +814,176 @@
 ze=%7B1.5%7D /%3E%0A
+    const notPublishedYet = this.state.data ? %3CCounter value=%7Bthis.state.data.notPublishedYet%7D label=%22%22 color=%22yellow%22 icon=%22hourglass half%22/%3E : loader%0A
     const pu
@@ -1704,21 +1704,21 @@
 ,%0A      
-paper
+stats
 : %7B%0A    
@@ -1735,15 +1735,153 @@
 y: '
-inline-
+flex',%0A        flexWrap: 'wrap',%0A        alignItems: 'center',%0A        justifyContent: 'space-around',%0A      %7D,%0A      paper: %7B%0A        display: '
 flex
@@ -1908,32 +1908,66 @@
 tion: 'column',%0A
+        justifyContent: 'center',%0A
         alignIte
@@ -2000,24 +2000,47 @@
 ing: '2em',%0A
+        margin: '2em',%0A
         marg
@@ -2808,16 +2808,54 @@
 %3C/div%3E%0A%0A
+        %3Cdiv style=%7Bstyles.stats%7D%3E%0A%0A  
         
@@ -2885,23 +2885,8 @@
 per%7D
- rounded=%7Btrue%7D
  zDe
@@ -2894,16 +2894,18 @@
 th=%7B2%7D%3E%0A
+  
         
@@ -2934,16 +2934,18 @@
         
+  
 %7Bpublish
@@ -2944,24 +2944,26 @@
 %7Bpublished%7D%0A
+  
           %3CL
@@ -2981,16 +2981,18 @@
 alogs%22%3E%0A
+  
         
@@ -3062,16 +3062,18 @@
         
+ 
+ 
 %3C/Link%3E%0A
@@ -3080,16 +3080,18 @@
         
+  
 %3C/Paper%3E
@@ -3092,16 +3092,170 @@
 Paper%3E%0A%0A
+          %3CPaper style=%7Bstyles.paper%7D zDepth=%7B2%7D%3E%0A            %3Ch3%3ENot Yet Published%3C/h3%3E%0A            %7BnotPublishedYet%7D%0A          %3C/Paper%3E%0A        %3C/div%3E%0A%0A
       %3C/

Undo remove notPublishedYet