import './SectionNumber.less';
import React from 'react';
import PropTypes from 'prop-types';
import values from 'lodash/values';
import classNames from 'classnames';
import { CHART_LAYOUT_TYPE, WIDGET_VALUES_FORMAT } from '../../constants/Constants';
import { capitalizeFirstLetter, formatNumberValue } from '../../utils/strings';

const TREND_NUMBER_LIMIT = 999;
const SectionNumber = ({
  data, layout, style, sign, signAlignment, title, titleStyle, valuesFormat = WIDGET_VALUES_FORMAT.abbreviated,
                         subTitle, numberStyle = {}
}) => {
  const isTrend = !!data.prevSum || data.prevSum === 0;
  let percentage = 0;
  const curr = data.currSum || 0;
  if (isTrend) {
    const prev = data.prevSum || 0;
    const divider = prev === 0 ? 1 : prev;
    percentage = parseInt(((curr - prev) / divider) * 100, 10);
  }

  const caretClass = classNames('trend-icon caret icon', {
    up: percentage > 0,
    red: percentage > 0 && style.backgroundColor,
    down: percentage < 0,
    green: percentage < 0 && style.backgroundColor
  });
  const trendIcon = percentage === 0 ?
    (<span className="trend-icon trend-equal">=</span>) : (<i className={caretClass} />);

  let shortPercentage = Math.abs(percentage) + '';
  if (isTrend && percentage > TREND_NUMBER_LIMIT) {
    shortPercentage = `>${TREND_NUMBER_LIMIT}`;
  }

  const color = style && style.backgroundColor ? '#FFF' : undefined;
  const titleColor = (titleStyle && titleStyle.color) ? titleStyle.color : color;
  const subTitleClass = classNames('demisto-number-sub-title', {
    'color-warning': !color
  });
  let trendContainer = '';
  if (isTrend) {
    const boxClass = classNames('trend-box', {
      red: !style.backgroundColor && percentage > 0,
      green: !style.backgroundColor && percentage < 0,
      grey: !style.backgroundColor && percentage === 0
    });
    trendContainer = (
      <div className="trend-container">
        <div className={boxClass}>
          {trendIcon}
          {shortPercentage}%
        </div>
      </div>
    );
  }
  const signElement = <span className="sign">{sign}</span>;
  return (
    <div className="section-number" style={style}>
      <div className="number-container">
        <div
          className="trend-num-text"
          style={{ ...numberStyle, color }}
        >
          {signAlignment === 'left' && signElement}
          {formatNumberValue(curr,
            valuesFormat === WIDGET_VALUES_FORMAT.percentage ? WIDGET_VALUES_FORMAT.regular : valuesFormat)}
          {signAlignment === 'right' && signElement}
        </div>
        {layout === CHART_LAYOUT_TYPE.horizontal && isTrend &&
        trendContainer
        }
        <div className="trend-message" style={{ ...titleStyle, color: titleColor }}>
          {capitalizeFirstLetter(title)}
          {subTitle && (
          <div className={subTitleClass} style={{ color: color || '#ff9000' }} title={subTitle}>
            {subTitle}
          </div>
          )}
        </div>
        {layout === CHART_LAYOUT_TYPE.vertical && isTrend &&
        trendContainer
        }
      </div>
    </div>
  );
};
SectionNumber.propTypes = {
  data: PropTypes.object,
  style: PropTypes.object,
  title: PropTypes.string,
  titleStyle: PropTypes.object,
  numberStyle: PropTypes.object,
  layout: PropTypes.oneOf(values(CHART_LAYOUT_TYPE)),
  sign: PropTypes.string,
  signAlignment: PropTypes.string,
  valuesFormat: PropTypes.oneOf(values(WIDGET_VALUES_FORMAT)),
  subTitle: PropTypes.string
};

export default SectionNumber;

@@ -495,39 +495,16 @@
 viated,%0A
-                       
   subTit

fix lint