import React from 'react';
import HoverInfo from 'app/shared/components/hoverInfo/hoverInfo';
import datePipe from 'app/shared/pipes/date.pipe';
import moneyPipe from 'app/shared/pipes/money.pipe';
import numberPipe from 'app/shared/pipes/number.pipe';
import { useSelector } from 'react-redux';
import {
  createDashboardIsLoadingSelector,
  getDashboardCurrentKeyFigures,
} from 'app/modules/dashboard/store/dashboard.selectors';
import { Spinner } from 'app/shared/components/spinner/spinner';
import { DASHBOARD } from 'app/modules/dashboard/store/dashboard.constants';
import { Dot } from 'app/shared/components/dot/dot';
import * as Text from 'app/shared/components/text/text';
import { Caption, Paragraph } from 'app/shared/components/text/text';
import { DashboardKeyFigure } from '../store/dashboard.types';
import { Figures, InfoBox } from 'app/shared/components/infoBox/infoBox';
import cx from 'classnames';

const NOT_AVAILABLE = 'N/A';

const createInfoBoxes = (keyFigure: DashboardKeyFigure) => {
  const figures: Figures[][] = [
    [ {
      value: keyFigure.bunkerPrice ? '$' + numberPipe.format(keyFigure.bunkerPrice, 2, 2) : NOT_AVAILABLE,
      type: 'text',
      description: 'Price',
      additionalDescription: 'Compliant',
      unit: '/mt',
    } ],
  ];

  if (keyFigure.isScrubber) {
    figures.push([ {
      value: keyFigure.bunkerPriceWithScrubber ? 
        '$' + numberPipe.format(keyFigure.bunkerPriceWithScrubber, 2, 2) : 
        NOT_AVAILABLE,
      type: 'text',
      description: 'Price',
      additionalDescription: 'Non compliant',
      unit: '/mt',
    } ]);
  }

  return figures;
};

export const DashboardKeyFigures = () => {
  const keyFigures = useSelector(getDashboardCurrentKeyFigures);
  const infoBoxes = createInfoBoxes(keyFigures);

  const dashboardFetchCollectionSelector = [ DASHBOARD.FETCH_KEY_FIGURES_SELECTOR ];
  const loadingStatus = useSelector(createDashboardIsLoadingSelector(dashboardFetchCollectionSelector));

  return loadingStatus ? <Spinner extraClass="o-gutter-bottom--big" /> : <div className="c-dashboard-key-figures">
    <div className="o-layout o-layout--space-between o-layout--wrap u-margin-top--big u-margin-lg-top--small">
      <div className="o-layout o-layout--aligned u-static-size u-margin-bottom u-margin-right">
        <Dot color="selected">
          <Text.Label extraClass="u-font--clear-spacings">
            PAY OUT
            <span className="o-gutter-left--small o-gutter-right--small">|</span>
            {keyFigures.date ? datePipe.formatShortMonthWithYear(keyFigures.date) : NOT_AVAILABLE}
          </Text.Label>
          {keyFigures.isForecast && <Text.Caption extraClass="u-color--dark-grey u-margin--none">
            <span className="o-gutter-left--small o-gutter-right--small">|</span>
            FORECAST
          </Text.Caption>}
          <div className="u-margin-left--small">
            <HoverInfo position={'top'}>Average pool earnings $/day</HoverInfo>
          </div>
        </Dot>
      </div>
      {keyFigures.isForecast && <div className="o-layout o-layout--aligned u-static-size u-margin-bottom">
        <Dot color="selected">
          <Text.Label extraClass="u-font--clear-spacings u-margin-right--medium">
            fixed
          </Text.Label>
        </Dot>
        <Dot color="selected" striped>
          <Text.Label extraClass="u-font--clear-spacings">
            unfixed
          </Text.Label>
        </Dot>
      </div>}
    </div>
    <div className="u-margin-top">
      <div className="u-display--inline-block u-margin-right--medium u-margin-bottom">
        <div className="u-margin-bottom--tiny">
          <Caption extraClass="u-margin--none">
            <span className="c-dashboard-key-figures__value">
              {keyFigures.tce ? moneyPipe.format(keyFigures.tce) : NOT_AVAILABLE}
            </span>
            /day
          </Caption>
        </div>
        <Paragraph size="small">
          Earnings
        </Paragraph>
      </div>
      <div className="o-layout o-layout--wrap">
        {infoBoxes.map((figure, index) => {
          const figureClassName = cx('o-layout__item-12', 'o-layout__item-lg-4', 'o-layout--wrap', 'o-gutter-bottom--small',
            {
              'o-gutter-lg-right--small': index < infoBoxes.length - 1,
              'o-gutter-lg-left--tiny': index > 0,
            }
          );
          return <div key={`figureInfoBox ${index}`} className={figureClassName}>
            <InfoBox boxes={figure} />
          </div>;
        })}
      </div>
    </div>
    <div className="u-static-size">
      <Caption 
        extraClass="u-color--dark-grey u-margin-top">
          Bunker consumption and bunker prices are an estimate based on the latest reported data
      </Caption>
    </div>
  </div>;
};