import React, { useState } from 'react';
import { isEmpty } from 'lodash';
import { useSelector } from 'react-redux';
import {
  createMarketsErrorStatusSelector,
  createMarketsIsLoadingSelector, selectHasImoCargoInExposure,
  selectProgressBarExposures,
} from '../store/markets.selectors';
import { ProgressBar } from 'app/shared/components/ProgressBar/progressBar';
import { MARKETS } from '../store/markets.constants';
import { Spinner } from 'app/shared/components/spinner/spinner';
import { Headline, Paragraph } from 'app/shared/components/text/text';
import { ProgressBarLegend } from 'app/shared/components/ProgressBar/progressBarLegend';
import ToggleButton from 'app/shared/components/ToggleButton/toggleButton';
import cx from 'classnames';

const IMO_CARGO_LABEL = 'IMO Cargo';

export const PositioningExposure = () => {
  const [ showImoCargo, setImoCargoVisibility ] = useState(false);
  const marketForecastExposure = useSelector(selectProgressBarExposures);
  const hasImoCargo = useSelector(selectHasImoCargoInExposure);
  const isLoading = useSelector(createMarketsIsLoadingSelector([ MARKETS.FETCH_EXPOSURE_SELECTOR ]));
  const error = useSelector(createMarketsErrorStatusSelector([ MARKETS.FETCH_EXPOSURE_SELECTOR ]));

  if ((isEmpty(marketForecastExposure.pool) || isEmpty(marketForecastExposure.market) || error) && !isLoading){
    return <Paragraph size="small" extraClass="u-margin-top--small" secondary>
      There are no positioning exposures for this period of time
    </Paragraph>;
  }

  const marketExposureClassName = cx('c-positioning-exposure__market-exposure', {
    'c-positioning-exposure__market-exposure--with-imo-cargo': showImoCargo,
  });

  return isLoading
    ? <Spinner extraClass="u-margin-top--big"/>
    : <div className="o-layout o-layout--vertical u-margin-top--big u-margin-sm-top--enormous">
      <div className="o-layout o-layout--space-between o-layout--aligned u-margin-bottom--medium">
        <Headline size="h3" extraClass="o-text__headline--3--16px u-font-letter-spacing u-uppercase u-font--clear-spacings">
          Pool
        </Headline>
        {hasImoCargo && <ToggleButton active={showImoCargo} onToggle={setImoCargoVisibility} label={IMO_CARGO_LABEL} />}
      </div>
      <div className="o-layout__item-12 u-margin-bottom--big u-margin-sm-bottom--enormous">
        <ProgressBar
          values={marketForecastExposure.pool}
          subProgress={showImoCargo ? marketForecastExposure.imoCargo : undefined}
          barKey="pool"
        />
      </div>
      <div className={marketExposureClassName}>
        <div className="u-margin-bottom--medium">
          <Headline size="h3" extraClass="o-text__headline--3--16px u-font-letter-spacing u-uppercase u-font--clear-spacings">
            Market
          </Headline>
        </div>
        <div className="o-layout__item-12 u-margin-bottom--big u-margin-sm-bottom--enormous">
          <ProgressBar values={marketForecastExposure.market} barKey="market" />
        </div>
      </div>
      <ProgressBarLegend labels={marketForecastExposure.legend} additionalLabel={showImoCargo ? IMO_CARGO_LABEL : undefined}/>
    </div>;
};