import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { toastr } from 'react-redux-toastr';
import classnames from 'classnames';

// Components
import DashboardWidgetCard from 'layout/app/dashboard-detail/dashboard-widget-card';
import PowerGenerationMap from '../power-generation-map';

// Services
import { fetchWidget } from 'services/widget';

// Constants
import { WORLD_COUNTRY } from 'layout/app/dashboard-detail/energy-country-explorer/constants';

// Styles
import './styles.scss';

function CustomSection(props) {
  const { section, bbox, country } = props;
  const { widgets, header, description, map, groups, mapTitle, widgetsWorld } = section;
  const countryIsWorld = !country || (country && country.value === WORLD_COUNTRY.value);
  const widgetBlocks = countryIsWorld ? widgetsWorld : widgets;
  const [data, setData] = useState(null);
  const [widgetsLoading, setWidgetsLoading] = useState(false);

  useEffect(() => {
    if (widgetBlocks) {
      const promises = widgetBlocks.map(wB => fetchWidget(wB.id, { includes: 'metadata' }));
      Promise.all(promises)
        .then((responses) => {
          if (!countryIsWorld) {
            const reducedResult = responses.reduce((acc, resp) => {
              if (resp.widgetConfig.type === 'embed') {
                // TO-DO: we should change the swipe viz here if necessary to adjust
                // the map position to the country selected
                return ({ ...acc, [resp.id]: resp });
              } else {
                const visualizationType = resp.widgetConfig.paramsConfig.visualizationType;
                if (visualizationType === 'chart') {
                  const key = resp.widgetConfig.sql_config[0].key_params[0].key;
                  const isISO = key === 'country_code';
                  const dataObj = resp.widgetConfig.data[0];
                  const newDataObj = {
                    ...dataObj,
                    url: dataObj.url.replace(new RegExp(
                      '{{where}}', 'g'), `WHERE ${key} IN ('${isISO ? country.value : country.label}')`)
                  };

                  const newWidgetConfig = {
                    ...resp.widgetConfig,
                    data: [newDataObj, ...resp.widgetConfig.data.slice(1, dataObj.length)]
                  };

                  const newWidget = {
                    ...resp,
                    widgetConfig: newWidgetConfig
                  }

                  return ({ ...acc, [resp.id]: newWidget });
                } else if (visualizationType === 'map') {
                  // Replacing Bounding box with that from the selected country                
                  const newWidgetConfig = {
                    ...resp.widgetConfig,
                    bbox
                  };
                  const newWidget = {
                    ...resp,
                    widgetConfig: newWidgetConfig
                  }
                  return ({ ...acc, [resp.id]: newWidget });
                }
              }
            }, {});

            setData(reducedResult);
          } else {
            setData(responses.reduce((acc, resp) => ({ ...acc, [resp.id]: resp }), {}));
          }
          setWidgetsLoading(false);
        })
        .catch(err => {
          toastr.error(`Error loading widget ${err}`);
          console.error(err);
        });
    }
  }, [country]);

  return (
    <div className="c-custom-section l-section">
      <div className="l-container">
        <div className="row">
          <div className="column small-12">
            <div className="text-container">
              <h2>{header}</h2>
              <p>{description}</p>
            </div>
            {!map &&
              <div className="row">
                {widgetBlocks && widgetBlocks.map(wB => {
                  const widgetBlockClassName = classnames({
                    column: true,
                    'small-12': true,
                    'medium-6': wB.widgetsPerRow === 2,
                    'large-4': wB.widgetsPerRow === 3
                  });
                  return (<div className={widgetBlockClassName}>
                    <DashboardWidgetCard
                      widget={data && data[wB.id]}
                      loading={widgetsLoading}
                      key={`dashboard-widget-card-${wB.id}`}
                    />
                  </div>);
                })}
              </div>
            }
            {map &&
              <PowerGenerationMap
                groups={groups}
                mapTitle={mapTitle}
                bbox={bbox}
              />
            }
          </div>
        </div>
      </div>
    </div>
  );
}

CustomSection.propTypes = {
  section: PropTypes.object.isRequired,
  country: PropTypes.object.isRequired,
  bbox: PropTypes.array
};

CustomSection.defaultProps = {
  bbox: []
};

export default CustomSection;

@@ -1868,16 +1868,418 @@
 ata%5B0%5D;%0A
+                  let countryName = country.label;%0A%0A                  // --- This patch is necessary since this country name varies for some datasets ----%0A                  if (country.label === 'United States of America') %7B%0A                    countryName = 'United States';%0A                  %7D%0A                  //------------------------------------------------------------------------------------%0A%0A
         
@@ -2491,22 +2491,20 @@
  country
-.label
+Name
 %7D')%60)%0A  

fix USA country name issue