import { Dot } from 'app/shared/components/dot/dot';
import React from 'react';
import * as Text from 'app/shared/components/text/text';
import moneyPipe from 'app/shared/pipes/money.pipe';
import numberPipe from 'app/shared/pipes/number.pipe';
import HoverInfo from 'app/shared/components/hoverInfo/hoverInfo';
import { useSelector } from 'react-redux';
import { selectKeyValues } from '../store/forecast.selectors';

const ForecastDetails = () => {
  const forecast = useSelector(selectKeyValues);
  const fixedPercentage = numberPipe.format(forecast.fixedPercentage, 0);
  const unfixedPercentage = numberPipe.format(forecast.unfixedPercentage, 0);

  return (
    <>
      <Dot color="selected">
        <Text.Label extraClass="u-margin--none">
          PAY OUT
          <span className="o-gutter-left--small o-gutter-right--small">|</span>
          {forecast.selectedMonth}
        </Text.Label>
        <Text.Caption extraClass="u-color--dark-grey u-margin--none">
          <span className="o-gutter-left--small o-gutter-right--small">|</span>
          FORECAST
        </Text.Caption>
      </Dot>
      <div className="u-display--flex u-align-items-baseline u-margin-top">
        <h4 className="o-text__key-figure">{moneyPipe.format(forecast.value, 'USD', 0)}</h4>
        <Text.Caption extraClass="u-margin-bottom--none u-margin-left--tiny">/day</Text.Caption>
      </div>
      <div className="u-display--flex u-align-items-baseline u-margin-bottom--big">
        <Text.Paragraph size="small" extraClass="u-margin--none">Current Forecast</Text.Paragraph>
        <Text.Caption extraClass="u-color--dark-grey u-margin--none">
          <i className="icon-arrow-clockwise-clock o-gutter-left--small o-gutter-right--tiny u-color--secondary-dark" />
          {forecast.lastUpdateDate}
        </Text.Caption>
      </div>
      <div className="u-margin-bottom--big">
        <Dot color="selected">
          <Text.Label extraClass="u-margin--none">FIXED</Text.Label>
          <HoverInfo position="top" extraClass="u-margin-left--small" icon="icon-info-straight">
            The estimated TCE/day earnings based on the fixed days in the period.
          </HoverInfo>
        </Dot>
        <div className="c-forecast-details__key-figure-aligned o-layout u-margin-top--small">
          <div className="o-layout__item-5">
            <h5 className="o-text__key-figure o-text__key-figure--medium">{fixedPercentage}%</h5>
            <Text.Paragraph size="small" extraClass="u-margin--none">percent</Text.Paragraph>
          </div>
          <div className="o-layout__item-5">
            <h5 className="o-text__key-figure o-text__key-figure--medium">
              {fixedPercentage && fixedPercentage !== '0' ? numberPipe.format(forecast.fixedRate, 0) : '-'}
            </h5>
            <Text.Paragraph size="small" extraClass="u-margin--none">rate</Text.Paragraph>
          </div>
        </div>
      </div>
      <div className="u-margin-bottom--big">
        <Dot color="selected" striped>
          <Text.Label extraClass="u-margin--none">UNFIXED</Text.Label>
          <HoverInfo position="top" extraClass="u-margin-left--small" icon="icon-info-straight">
            The forecasted rates are based on Clarkson’s spot forecast and expected pool outperformance for the period.
          </HoverInfo>
        </Dot>
        <div className="c-forecast-details__key-figure-aligned o-layout u-margin-top--small">
          <div className="o-layout__item-5">
            <h5 className="o-text__key-figure o-text__key-figure--medium">{unfixedPercentage}%</h5>
            <Text.Paragraph size="small" extraClass="u-margin--none">percent</Text.Paragraph>
          </div>
          <div className="o-layout__item-5">
            <h5 className="o-text__key-figure o-text__key-figure--medium">
              {unfixedPercentage && unfixedPercentage !== '0' ? numberPipe.format(forecast.unfixedRate, 0) : '-'}
            </h5>
            <Text.Paragraph size="small" extraClass="u-margin--none">rate</Text.Paragraph>
          </div>
        </div>
      </div>
      <div className="c-forecast-details__key-figure-aligned u-display--flex u-align-items-center u-margin-top--big">
        <Text.Label extraClass="u-margin-bottom--none">PAY OUT RATIO: {numberPipe.format(forecast.payoutRatio, 0)}%</Text.Label>
        <HoverInfo position="top" extraClass="u-margin-left--small" icon="icon-info-straight">
          <p>Indicates the expected pay out ratio.</p>
          <p>
            Percentage below 100 indicates what part of the distribution will be paid out.
            Data are updated on a fortnightly basis.
          </p>
          <p className="u-margin--none">Detailed information are shared by email.</p>
        </HoverInfo>
      </div>
    </>
  );
};

export { ForecastDetails };