'use strict';
import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';

import config from '../config';
import { formatThousands } from '../utils/format';
import { openDownloadModal } from '../actions/action-creators';

var CountriesHub = React.createClass({
  displayName: 'CountriesHub',

  propTypes: {
    _openDownloadModal: React.PropTypes.func,
    countries: React.PropTypes.array
  },

  onDownloadClick: function (country, e) {
    e.preventDefault();
    this.props._openDownloadModal({country: country});
  },

  renderCountryList: function () {
    return this.props.countries.map(o => (
      <article className='card card--data-compact' key={o.code}>
        <div className='card__contents'>
          <header className='card__header'>
            <h1 className='card__title'><Link to={`/countries/${o.code}`} title={`View ${o.name} page`}>{o.name}</Link></h1>
          </header>
          <div className='card__body'>
            <ul className='card__meta-details'>
              <li>Measurements: {formatThousands(o.count)}</li>
              <li>Locations: {formatThousands(o.locations)}</li>
            </ul>
          </div>
          <footer className='card__footer'>
            <ul className='card__actions'>
              <li><a href='#' className='button-card-download' title={`Download data for ${o.name}`} onClick={this.onDownloadClick.bind(null, o.code)}>Download</a></li>
              <li><Link to={`/countries/${o.code}`} className='button-card-view' title={`View ${o.name} page`}>View More</Link></li>
            </ul>
          </footer>
        </div>
      </article>
    ));
  },

  render: function () {
    return (
      <section className='inpage'>
        <header className='inpage__header'>
          <div className='inner'>
            <div className='inpage__headline'>
              <h1 className='inpage__title'>Browse by Country</h1>
            </div>
            <div className='inpage__introduction'>
              <p>We’re currently collecting data in {this.props.countries.length} different countries and always seeking to add more. We aggregate PM2.5, PM10, ozone (O3), sulfur dioxide (SO2), nitrogen dioxide (NO2), carbon monoxide (CO), and black carbon (BC) from real-time government and research grade sources. Please note: (1) We do not validate or transform the data from their originating sources. (2) Real-time data, by their nature, often have not undergone quality assurance or control processes by their originating sources. (3) Please contact originating sources for more detailed information not provided on this platform. (4) If you can’t find the location you’re looking for, please <a href='https://docs.google.com/forms/d/1Osi0hQN1-2aq8VGrAR337eYvwLCO5VhCa3nC_IK2_No/viewform' title='Suggest a new source'>suggest a source</a> of <a href='mailto:info@openaq.org' title='Contact openaq'>send us an email</a>.</p>
            </div>
            <div className='inpage__actions'>
              <ul>
                <li><a href={config.apiDocs} title='View API documentation' className='button-inpage-api' target='_blank'>View API Docs</a></li>
              </ul>
            </div>
          </div>
        </header>
        <div className='inpage__body'>

          <div className='fold' id='countries-list'>
            <div className='inner'>
              <div className='fold__body'>
                <div className='countries-list'>
                  {this.renderCountryList()}
                </div>
              </div>
            </div>
          </div>

        </div>
      </section>
    );
  }
});

// /////////////////////////////////////////////////////////////////// //
// Connect functions

function selector (state) {
  return {
    countries: state.baseData.data.countries
  };
}

function dispatcher (dispatch) {
  return {
    _openDownloadModal: (...args) => dispatch(openDownloadModal(...args))
  };
}

module.exports = connect(selector, dispatcher)(CountriesHub);

@@ -2312,333 +2312,8 @@
 ces.
- Please note: (1) We do not validate or transform the data from their originating sources. (2) Real-time data, by their nature, often have not undergone quality assurance or control processes by their originating sources. (3) Please contact originating sources for more detailed information not provided on this platform. (4)
  If 
@@ -2358,17 +2358,16 @@
 king for
-,
  please 
@@ -2597,16 +2597,192 @@
 a%3E.%3C/p%3E%0A
+              %3Csmall className='disclaimer'%3E%3Ca href='https://medium.com/@openaq/where-does-openaq-data-come-from-a5cf9f3a5c85'%3EData Disclaimer and More Information%3C/a%3E%3C/small%3E%0A
         

Add data disclaimer to country hub