import React from 'react';
import { ResponsiveWrapper } from 'app/shared/modules/chart/core';
import { useSelector } from 'react-redux';
import { isEmpty } from 'lodash';
import { ErrorsList } from 'app/shared/components/errorMessage/errorsList';
import { Spinner } from 'app/shared/components/spinner/spinner';
import {
  createForecastErrorStatusSelector,
  createForecastIsLoadingSelector,
  selectForecastChartData,
} from '../../store/forecast.selectors';
import { FORECAST } from '../../store/forecast.constants';
import { ForecastChart } from './forecastChart';

const ForecastChartWrapper = () => (
  <ResponsiveWrapper>
    {
      (size) => {
        const barSeries = useSelector(selectForecastChartData).barSeries;
        const dashboardFetchCollectionSelector = [ FORECAST.FETCH_COLLECTION_SELECTOR ];

        const loadingStatus = useSelector(createForecastIsLoadingSelector(dashboardFetchCollectionSelector));
        const errorLoadingStatus = useSelector(createForecastErrorStatusSelector(dashboardFetchCollectionSelector));

        if (!isEmpty(errorLoadingStatus)) {
          return <ErrorsList errors={errorLoadingStatus} />;
        }

        if (loadingStatus) {
          return <Spinner />;
        }

        return !barSeries || barSeries.length === 0
          ? <div className="c-chart__no-data-label">No data available.</div>
          : <ForecastChart
            width={Number(size?.width)}
            height={Number(size?.height)}
          />;
      }
    }
  </ResponsiveWrapper>
);

export { ForecastChartWrapper };