import React, { Component } from 'react'
import { Link } from 'react-router'
import LastHarvesting from '../LastHarvesting/LastHarvesting'
import Statistics from '../Statistics/Statistics'
import Percent from '../Statistics/Percent/Percent'
import './Catalog.css'

class Catalog extends Component {
  constructor(props) {
    super(props)
    this.state = {metrics: undefined}
    this.getMetrics()
  }

  getMetrics() {
    return fetch(`https://inspire.data.gouv.fr/api/geogw/catalogs/${this.props.catalog.id}/metrics`)
      .then((response) => response.json())
      .then((metrics) => {
        this.setState({metrics})
      })
      .catch((err) => {
        console.error(err)
      })
  }

  render() {
    if (this.state.metrics) {
      return (
          <Link to={`catalog/${this.props.catalog.id}`}>
            <div className="ui segment">
              <LastHarvesting harvest={this.props.catalog.lastHarvesting}/>
              <div className="ui equal width grid container">
                <div className="column">
                  <span className="ui large header">{this.props.catalog.name}</span>
                </div>
                <div className="column"></div>
                <div className="column"><Percent metrics={this.state.metrics} label="openness" icon="users" size="small" /></div>
                <div className="column"><Percent metrics={this.state.metrics} label="download" icon="download" size="small" /></div>
                <div className="column"><Statistics value={this.props.catalog.lastHarvesting.recordsFound} size="small" label="Entries" /></div>
              </div>
            </div>
          </Link>
      )
    } else {
      return (<div></div>)
    }

  }
}

export default Catalog

@@ -713,33 +713,344 @@
     
-if (this.state.metrics) %7B
+  const loader = %3Cdiv className=%22ui active big loader%22%3E%3C/div%3E%0A      const openness = this.state.metrics ? %3CPercent metrics=%7Bthis.state.metrics%7D label=%22openness%22 icon=%22users%22 size=%22small%22 /%3E : loader%0A      const download = this.state.metrics ? %3CPercent metrics=%7Bthis.state.metrics%7D label=%22download%22 icon=%22users%22 size=%22small%22 /%3E : loader%0A
 %0A   
@@ -1537,224 +1537,75 @@
 mn%22%3E
-%3CPercent metrics=%7Bthis.state.metrics%7D label=%22openness%22 icon=%22users%22 size=%22small%22 /%3E%3C/div%3E%0A                %3Cdiv className=%22column%22%3E%3CPercent metrics=%7Bthis.state.metrics%7D label=%22download%22 icon=%22download%22 size=%22small%22 /%3E
+%7Bopenness%7D%3C/div%3E%0A                %3Cdiv className=%22column%22%3E%7Bdownload%7D
 %3C/di
@@ -1822,53 +1822,8 @@
   )%0A
-    %7D else %7B%0A      return (%3Cdiv%3E%3C/div%3E)%0A    %7D
 %0A%0A  

Add loaders for Catalogs statistics