import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';

import WidgetDynamicSentence from 'pages/country/widget/components/widget-dynamic-sentence';
import WidgetNumberedList from 'pages/country/widget/components/widget-numbered-list';
import NoContent from 'components/no-content';
import COLORS from 'pages/country/data/colors.json';

import './widget-tree-gain-styles.scss';

class WidgetTreeCoverGain extends PureComponent {
  render() {
    const { locationNames, loading, data, settings, getSentence } = this.props;

    return (
      <div className="c-widget-tree-cover-gain">
        {!loading &&
          data &&
          data.ranking.length === 0 && (
            <NoContent
              message={`No data for ${locationNames.current &&
                locationNames.current.label}`}
              icon
            />
          )}
        {!loading &&
          data &&
          data.ranking.length > 0 && (
            <div className="gain-data">
              <WidgetDynamicSentence sentence={getSentence()} />
              <WidgetNumberedList
                className="ranking-list"
                data={data.ranking}
                settings={settings}
                colorRange={[COLORS.darkGreen, COLORS.nonForest]}
                handlePageChange={() => {}}
              />
            </div>
          )}
      </div>
    );
  }
}

WidgetTreeCoverGain.propTypes = {
  loading: PropTypes.bool.isRequired,
  locationNames: PropTypes.object,
  data: PropTypes.object.isRequired,
  settings: PropTypes.object.isRequired,
  getSentence: PropTypes.func.isRequired
};

export default WidgetTreeCoverGain;

@@ -260,55 +260,8 @@
 t';%0A
-import NoContent from 'components/no-content';%0A
 impo
@@ -430,32 +430,8 @@
 st %7B
- locationNames, loading,
  dat
@@ -547,290 +547,8 @@
    %7B
-!loading &&%0A          data &&%0A          data.ranking.length === 0 && (%0A            %3CNoContent%0A              message=%7B%60No data for $%7BlocationNames.current &&%0A                locationNames.current.label%7D%60%7D%0A              icon%0A            /%3E%0A          )%7D%0A        %7B!loading &&%0A          
 data
@@ -1066,81 +1066,8 @@
 = %7B%0A
-  loading: PropTypes.bool.isRequired,%0A  locationNames: PropTypes.object,%0A
   da

remove behaviour managed by the parent widget