import { createElement, PureComponent } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { format } from 'd3-format';
import isEqual from 'lodash/isEqual';

import { getActiveFilter } from 'pages/country/widget/widget-selectors';

import actions from './widget-tree-gain-actions';
import reducers, { initialState } from './widget-tree-gain-reducers';
import { getSortedData } from './widget-tree-gain-selectors';
import WidgetTreeGainComponent from './widget-tree-gain-component';

const mapStateToProps = ({ location, widgetTreeGain, countryData }) => {
  const { isCountriesLoading, isRegionsLoading } = countryData;
  let meta = [];
  if (location.payload.subRegion) {
    meta = countryData.subRegions;
  } else if (location.payload.region) {
    meta = countryData.regions;
  } else {
    meta = countryData.countries;
  }

  return {
    loading: widgetTreeGain.loading || isCountriesLoading || isRegionsLoading,
    data: {
      gain: widgetTreeGain.data.gain,
      extent: widgetTreeGain.data.extent,
      ranking:
        getSortedData({
          ranking: widgetTreeGain.data.ranking,
          unit: widgetTreeGain.settings.unit,
          meta,
          location: location.payload
        }) || []
    }
  };
};

class WidgetTreeGainContainer extends PureComponent {
  componentWillMount() {
    const { location, settings, getTreeGain } = this.props;
    getTreeGain({
      ...location,
      ...settings
    });
  }

  componentWillReceiveProps(nextProps) {
    const { settings, location, getTreeGain } = nextProps;
    if (
      !isEqual(location, this.props.location) ||
      !isEqual(settings.indicator, this.props.settings.indicator) ||
      !isEqual(settings.threshold, this.props.settings.threshold) ||
      !isEqual(settings.extentYear, this.props.settings.extentYear)
    ) {
      getTreeGain({
        ...location,
        ...settings
      });
    }
  }

  getSentence = () => {
    const { locationNames, data: { gain, extent }, settings } = this.props;
    const { indicators } = this.props.options;
    const indicator =
      indicators && getActiveFilter(settings, indicators, 'indicator');
    const regionPhrase =
      settings.indicator === 'gadm28'
        ? '<span>region-wide</span>'
        : `in <span>${indicator && indicator.label.toLowerCase()}</span>`;

    const areaPercent = format('.1f')(100 * gain / extent);
    const firstSentence = `From 2001 to 2012, <span>${locationNames.current &&
      locationNames.current.label}</span> gained <strong>${
      gain ? format('.3s')(gain) : '0'
    }ha</strong> of tree cover ${regionPhrase}`;
    const secondSentence = gain
      ? `, equivalent to a <strong>${areaPercent}%</strong> increase relative to <b>${
        settings.extentYear
      }</b> tree cover extent.`
      : '.';

    return `${firstSentence}${secondSentence}`;
  };

  render() {
    return createElement(WidgetTreeGainComponent, {
      ...this.props,
      getSentence: this.getSentence
    });
  }
}

WidgetTreeGainContainer.propTypes = {
  locationNames: PropTypes.object.isRequired,
  data: PropTypes.object.isRequired,
  options: PropTypes.object.isRequired,
  settings: PropTypes.object.isRequired,
  location: PropTypes.object.isRequired,
  getTreeGain: PropTypes.func.isRequired
};

export { actions, reducers, initialState };

export default connect(mapStateToProps, actions)(WidgetTreeGainContainer);

@@ -672,18 +672,37 @@
  meta = 
-%5B%5D
+countryData.countries
 ;%0A  if (
@@ -845,53 +845,8 @@
 %0A  %7D
- else %7B%0A    meta = countryData.countries;%0A  %7D
 %0A%0A  

simplify meta conditionals