import React from 'react';
import { TCssRules, TIconName, TPositionTrend } from '../types';
import { fp as _ } from '../utils/fp';
import { Icon } from './icon';
import { SPositionTrendsValue } from '../s-components/s-position-trends-value';
import { getTrendsSettings } from '../transducers';
import { SPositionTrendsContainer } from '../s-components/s-position-trends-container';

type TProps = {
  trend: TPositionTrend;
  isReversed?: boolean;
  showPercent?: boolean;
} & TCssRules;

export const PositionTrends: React.FC<TProps> = ({
  trend,
  isReversed = false,
  showPercent = false,
  ...rest
}) => {
  const { value, iconName, color, trendValue } = getTrendsSettings(
    trend,
    isReversed
  );

  if (_.isNil(value) || _.isEmpty(value) || value === 0) {
    return null;
  }

  return (
    <SPositionTrendsContainer testID="trend-position" {...rest}>
      <Icon name={iconName as TIconName} size={12} color={color} />
      <SPositionTrendsValue color={color}>
        {trendValue}
        {showPercent ? '%' : null}
      </SPositionTrendsValue>
    </SPositionTrendsContainer>
  );
};