import React from 'react';
import * as Text from 'app/shared/components/text/text';
import { Dot } from 'app/shared/components/dot/dot';
import { TceMoneyTrend } from './tceMoneyTrend';
import { useSelector } from 'react-redux';
import { selectCurrentTcePeriod, selectPreviousTceMonths, selectTceKeyValues } from '../store/earnings.selectors';
import moneyPipe from 'app/shared/pipes/money.pipe';
import { selectBenchmarkMode, selectIsBenchmarkAvailable } from '../store/benchmark.selectors';
import { BENCHMARK_MODE_YEAR } from '../store/earnings.constants';

const TceKeyValues = () => {
  const tceKeyValues = useSelector(selectTceKeyValues);
  const tceMonth = useSelector(selectCurrentTcePeriod);
  const months = useSelector(selectPreviousTceMonths);
  const isGlobalSpotOrYearTcAvailable = useSelector(selectIsBenchmarkAvailable);
  const benchmarkMode = useSelector(selectBenchmarkMode);
  
  const isModeYearSelected = benchmarkMode === BENCHMARK_MODE_YEAR;

  const isComparisionAvailable = [
    tceKeyValues.versusPreviousAggregationPeriod,
    tceKeyValues.versusSamePeriodLastYear,
    tceKeyValues.versusGlobalSpot,
    tceKeyValues.versusOneYearTc,
  ].some(value => value);
  
  return (
    <div className="o-layout o-layout--vertical">
      <div className="o-layout o-layout--space-between u-align-items-end">
        <Dot color="selected">
          <Text.Label extraClass='o-layout__item u-margin--none'>
            Pay out
            <span className="o-gutter-left--small o-gutter-right--small">|</span>
            {tceMonth?.toUpperCase()}</Text.Label>
        </Dot>
        <div className="o-layout o-layout__item--auto">
          <div className="u-margin-right">
            <Dot color="primary">
              <Text.Label extraClass="u-margin--none">Pay out</Text.Label>
            </Dot>
          </div>
          { isGlobalSpotOrYearTcAvailable && 
            <div className="u-margin-left">
              <Dot color="primary-dark">
                <Text.Label extraClass="u-margin--none">{isModeYearSelected ? '1 Year TC' : 'GLOBAL SPOT'}</Text.Label>
              </Dot>
            </div>
          }
        </div>
      </div>
      <div className="u-display--inline-flex u-align-items-baseline u-margin-top">
        <h4 className="o-text__key-figure">{moneyPipe.format(tceKeyValues.current, 'USD', 0)}</h4>
        <Text.Caption extraClass="u-margin-bottom--none u-margin-left--tiny">/day</Text.Caption>
      </div>
      <Text.Paragraph size="small" extraClass="u-margin--none">Earnings</Text.Paragraph>
      { isComparisionAvailable &&
        <>
          <div className="u-margin-top--big">
            <Text.Label>COMPARISON</Text.Label>
          </div>
          <div className="o-layout o-layout--vertical">
            <div className="o-layout">
              { tceKeyValues.versusPreviousAggregationPeriod && 
              <div className="o-layout__item-6">
                <TceMoneyTrend value={tceKeyValues.current - tceKeyValues.versusPreviousAggregationPeriod} label={`vs ${months.previousLabel}`} />
              </div>
              }
              { tceKeyValues.versusSamePeriodLastYear && months.previousYearLabel && 
              <div className="o-layout__item-auto">
                <TceMoneyTrend value={tceKeyValues.current - tceKeyValues.versusSamePeriodLastYear} label={`vs ${months.previousYearLabel}`} />
              </div>
              }
            </div>
            <div className="o-layout u-margin-top">
              { tceKeyValues.versusGlobalSpot &&
              <div className="o-layout__item-6">
                <TceMoneyTrend value={tceKeyValues.current - tceKeyValues.versusGlobalSpot} label="vs Global Spot" />
              </div>
              }
              { tceKeyValues.versusOneYearTc &&
              <div className="o-layout__item-auto">
                <TceMoneyTrend value={tceKeyValues.current - tceKeyValues.versusOneYearTc} label="vs 1 Year TC" />
              </div>
              }
            </div>
          </div>
        </>
      }
    </div>
  );
};

export default TceKeyValues;