import {
  addDecimalsFormatNumber,
  formatNumberPercentage,
} from '@vegaprotocol/react-helpers';
import BigNumber from 'bignumber.js';
import React from 'react';

import { Arrow } from '../arrows/arrow';

export interface PriceChangeCellProps {
  /** either candle `close`or `open` values to be filtered and used here in order to calculate the price change  */
  candles: string[];
  decimalPlaces?: number;
}

export const priceChangePercentage = (candles: string[]) => {
  const change = priceChange(candles);
  if (change && candles && candles.length > 0) {
    const yesterdayLastPrice = candles[0] && BigInt(candles[0]);
    if (yesterdayLastPrice) {
      return new BigNumber(change.toString())
        .dividedBy(new BigNumber(yesterdayLastPrice.toString()))
        .multipliedBy(100)
        .toNumber();
    }
    return 0;
  }
  return 0;
};

export const priceChange = (candles: string[]) => {
  return candles &&
    candles[candles.length - 1] !== undefined &&
    candles[0] !== undefined
    ? BigInt(candles[candles.length - 1] ?? 0) - BigInt(candles[0] ?? 0)
    : 0;
};

const priceChangeClassNames = (value: number | bigint) =>
  value === 0
    ? 'text-black dark:text-white'
    : value > 0
    ? `text-vega-green-dark dark:text-vega-green `
    : `text-vega-red-dark dark:text-vega-red`;

export const PriceCellChange = React.memo(
  ({ candles, decimalPlaces }: PriceChangeCellProps) => {
    const change = priceChange(candles);
    const changePercentage = priceChangePercentage(candles);
    return (
      <span
        className={`${priceChangeClassNames(
          change
        )} flex items-center gap-4 justify-end`}
      >
        <Arrow value={change} />
        <span className="flex items-center gap-6 font-mono text-ui-small">
          <span data-testid="price-change-percentage">
            {formatNumberPercentage(
              new BigNumber(changePercentage.toString()),
              2
            )}
            &nbsp;
          </span>
          <span data-testid="price-change">
            {addDecimalsFormatNumber(change.toString(), decimalPlaces ?? 0, 3)}
          </span>
        </span>
      </span>
    );
  }
);

PriceCellChange.displayName = 'PriceCellChange';
