import React, { Component } from 'react'
import Paper from 'material-ui/Paper'
import { Link } from 'react-router'
import LastHarvesting from '../LastHarvesting/LastHarvesting'
import Loader from '../Loader/Loader'
import Counter from '../Statistics/Counter/Counter'
import Percent from '../Statistics/Percent/Percent'
import { fetchMetrics } from '../fetch/fetch';
import { waitForDataAndSetState, cancelAllPromises } from '../helpers/components';

class Catalog extends Component {
  constructor(props) {
    super(props)
    this.state = {errors: []}
  }

  componentWillMount() {
    return waitForDataAndSetState(fetchMetrics(this.props.catalog.id), this, 'metrics');
  }

  componentWillUnmount() {
    return cancelAllPromises(this)
  }

  render() {
      const metrics = this.state.metrics
      const openness = metrics ? <Percent value={metrics.partitions['openness'] ? metrics.partitions['openness'].yes : 0} total={metrics.totalCount} label="open data" icon="unlock alternate icon" size="small" /> : <div></div>
      const download = metrics ? <Percent value={metrics.partitions['download'] ? metrics.partitions['download'].yes : 0} total={metrics.totalCount} label="downloadable" icon="download" size="small" /> : <div></div>
      const counter = metrics ? <Counter value={metrics.totalCount} size="small" label="Records" /> : <div></div>

      const styles = {
        link: {
          cursor: 'pointer',
          margin: '1em 3em 1em 3em',
        },
      }
      return (
          <Link to={`/catalogs/${this.props.catalog.id}`} style={styles.link}>
            <Paper rounded={true} zDepth={2} className="ui segment">
              <LastHarvesting harvest={this.props.catalog.lastHarvesting}/>
              <div className="ui grid container">
                <div className="six wide column">
                  <span className="ui large header">{this.props.catalog.name}</span>
                </div>
                <div className="ten wide column">
                  <div className="ui equal width grid">
                    <div className="column">
                      <Loader value={metrics} component={openness} />
                    </div>
                    <div className="column">
                      <Loader value={metrics} component={download} />
                    </div>
                    <div className="column">
                      <Loader value={metrics} component={counter} />
                    </div>
                  </div>
                </div>
              </div>
            </Paper>
          </Link>
      )
  }
}

export default Catalog

@@ -34,16 +34,54 @@
 'react'%0A
+import Loader from '../Loader/Loader'%0A
 import P
@@ -157,203 +157,122 @@
 ort 
-LastHarvesting from '../LastHarvesting/LastHarvesting'%0Aimport Loader from '../Loader/Loader'%0Aimport Counter from '../Statistics/Counter/Counter'%0Aimport Percent from '../Statistics/Percent/Percent
+CatalogPreview from './CatalogPreview/CatalogPreview'%0Aimport LastHarvesting from '../LastHarvesting/LastHarvesting
 '%0Aim
@@ -724,593 +724,72 @@
 nst 
-metrics = this.state.metrics%0A      const openness = metrics ? %3CPercent value=%7Bmetrics.partitions%5B'openness'%5D ? metrics.partitions%5B'openness'%5D.yes : 0%7D total=%7Bmetrics.totalCount%7D label=%22open data%22 icon=%22unlock alternate icon%22 size=%22small%22 /%3E : %3Cdiv%3E%3C/div%3E%0A      const download = metrics ? %3CPercent value=%7Bmetrics.partitions%5B'download'%5D ? metrics.partitions%5B'download'%5D.yes : 0%7D total=%7Bmetrics.totalCount%7D label=%22downloadable%22 icon=%22download%22 size=%22small%22 /%3E : %3Cdiv%3E%3C/div%3E%0A      const counter = metrics ? %3CCounter value=%7Bmetrics.totalCount%7D size=%22small%22 label=%22Records%22 /%3E : %3Cdiv%3E%3C/div%3E%0A
+catalogPreview = %3CCatalogPreview metrics=%7Bthis.state.metrics%7D /%3E
 %0A   
@@ -1051,31 +1051,8 @@
 =%7B2%7D
- className=%22ui segment%22
 %3E%0A  
@@ -1078,16 +1078,38 @@
 rvesting
+ style=%7Bstyles.ribbon%7D
  harvest
@@ -1170,774 +1170,212 @@
 div 
-className=%22ui grid container%22%3E%0A                %3Cdiv className=%22six wide column%22%3E%0A                  %3Cspan className=%22ui large header%22%3E%7Bthis.props.catalog.name%7D%3C/span%3E%0A                %3C/div%3E%0A                %3Cdiv className=%22ten wide column%22%3E%0A                  %3Cdiv className=%22ui equal width grid%22%3E%0A                    %3Cdiv className=%22column%22%3E%0A                      %3CLoader value=%7Bmetrics%7D component=%7Bopenness%7D /%3E%0A                    %3C/div%3E%0A                    %3Cdiv className=%22column%22%3E%0A                      %3CLoader value=%7Bmetrics%7D component=%7Bdownload%7D /%3E%0A                    %3C/div%3E%0A                    %3Cdiv className=%22column%22%3E%0A                      %3CLoader value=%7Bmetrics%7D component=%7Bcounter%7D /%3E%0A                    %3C/div%3E%0A                  %3C/div%3E%0A                %3C/div
+style=%7Bstyles.stats%7D%3E%0A                %3Cspan style=%7Bstyles.title%7D className=%22ui large header%22%3E%7Bthis.props.catalog.name%7D%3C/span%3E%0A                %3CLoader value=%7Bthis.state.metrics%7D component=%7BcatalogPreview%7D/
 %3E%0A  

Use CatalogPreview