import React from 'react';
import numberPipe from 'app/shared/pipes/number.pipe';
import moneyPipe from 'app/shared/pipes/money.pipe';
import cx from 'classnames';

interface StepProp {
  key: string;
  value: number | null;
  isMoney?: boolean;
  operation?: string;
}

const summaryCalculationStep = ({ key, value, isMoney, operation }: StepProp) => {
  const safeValue = value ?? 0;

  return (
    <div className="c-bunker-adjustment-calculation-steps__label o-layout o-layout--space-between u-font-size--caption o-layout--align-end">
      <div>{key}</div>
      <div className="u-no-wrap o-gutter-left">
        {operation && operation?.length > 0 ? (<span className="c-bunker-adjustment-calculation-steps__operator">{operation}</span>) : null}
        {isMoney ? moneyPipe.prefixedFormat(safeValue) : numberPipe.format(safeValue, 2)}
      </div>
    </div>
  );
};

interface ResultProp extends StepProp {
  isLarge?: boolean;
}

const summaryCalculationResult = ({ key, value, isLarge }: ResultProp) => {
  const safeValue = value ?? 0;

  const resultWrapperClasses = cx({
    'c-bunker-adjustment-calculation-steps__result-wrapper--large': isLarge,
    'c-bunker-adjustment-calculation-steps__result-wrapper': !isLarge,
  });

  const resultClasses = cx(
    'c-bunker-adjustment-calculation-steps__result o-layout o-layout--space-between',
    { 'c-bunker-adjustment-calculation-steps__result--large': isLarge }
  );

  const valueColor = cx('o-`gutter-left', 'u-no-wrap', 'u-margin-bottom--none', 'u-font--clear-spacings', {
    'u-color--money-positive': value !== null && value > 0,
    'u-color--money-negative': value !== null && value < 0,
  });

  return (
    <div className="u-bg-color--background-alternative">
      <div className={resultWrapperClasses}>
        <div className={resultClasses}>
          <p className="u-margin-bottom--none u-font--clear-spacings">{key}</p>
          <p className={valueColor}>{moneyPipe.prefixedFormat(safeValue)}</p>
        </div>
      </div>

    </div>
  );
};

export interface Props {
  steps: StepProp[];
  result: ResultProp;
}

const BunkerAdjustmentCalculationSteps = ({ steps, result }: Props) => {
  const resultWrapperStyles = cx({
    'o-gutter-top': result.isLarge,
    'o-gutter-top--small': !result.isLarge,
  });

  return <>
    {steps.map((item, index) => {
      const styles = cx('o-gutter-left', 'o-gutter-right', 'o-gutter-bottom--small');

      return (
        <div key={'step' + index} className={styles}>
          {summaryCalculationStep(item)}
        </div>
      );
    })}
    <div className={resultWrapperStyles}>
      {summaryCalculationResult(result)}
    </div>
  </>;
};

export { BunkerAdjustmentCalculationSteps };