import React from 'react';
import { ForecastChartWrapper } from 'app/modules/forecast/components/chart/forecastChartWrapper';
import { Headline } from 'app/shared/components/text/text';
import { PositioningExposure } from 'app/modules/markets/components/positioningExposure';
import { MarketComments } from 'app/modules/markets/components/marketComments';
import { ForecastDetails } from '../components/forecastDetails';
import { useSelector } from 'react-redux';
import { selectCurrentPoolName } from 'app/shared/services/filters/filters.service';
import { ROUTER } from 'app/common/routes';

const ForecastPoolPage = () => {
  const poolName = useSelector(selectCurrentPoolName(ROUTER.lookup(location.pathname).options.pool));
  const hideExposure = poolName?.toLowerCase().trim() === 'flexi';

  return <div className="o-main-column u-margin-top--big o-gutter-left o-gutter-right">
    <div className="o-layout o-layout--wrap">
      <div className="o-main-column--bottom-space c-forecast__chart o-layout__item-12 o-layout__item-sm-8 o-layout__item-md-12 o-layout__item-lg-8">
        <Headline size="h2" extraClass="u-margin-bottom u-margin-lg-bottom--enormous">Earnings Forecast</Headline>
        <div className="c-forecast__container o-layout o-layout--wrap">
          <div className="c-forecast__graph-container o-layout__item-12 o-layout__item-md-8">
            <div className="c-chart c-chart--forecast">
              <ForecastChartWrapper/>
            </div>
          </div>
          <div className="o-layout__item-12 o-layout__item-md-4 u-margin-top u-margin-md-top--none">
            <ForecastDetails />
          </div>
        </div>
        {!hideExposure && <>
          <Headline size='h2' extraClass='u-margin-bottom--none'>Current Positioning Exposure</Headline>
          <PositioningExposure />
        </>}
      </div>
      <div className="o-layout__item-12 o-layout__item-lg-4 u-margin-bottom--big u-margin-lg-bottom--none">
        <MarketComments />
      </div>
    </div>
  </div>;
};

export { ForecastPoolPage };