import React, { ReactElement } from 'react';
import css from '../../utils/css';

import { CommonProps } from '../common';

import {
  StatisticContainer,
  StyledTitleWrapper,
  StyledContentWrapper,
  StyledPrefixWrapper,
  StyledValueWrapper,
  StyledSuffixWrapper,
} from './StyledStatistic';

export interface StatisticProps extends CommonProps {
  /**
   * Alignment between title and content.
   */
  align?: 'left' | 'right';
  /**
   * Text color of the content.
   */
  intent?: 'text' | 'white' | 'inherit';
  /**
   * The prefix element of value.
   */
  prefix?: string | ReactElement;
  /**
   * The suffix element of value.
   */
  suffix?: string | ReactElement;
  /**
   * Title of Statistic.
   */
  title: string;
  /**
   * Value to be displayed.
   */
  value: string | ReactElement;
}

const Statistic = ({
  align = 'right',
  intent = 'text',
  suffix,
  prefix,
  title,
  value,
  id,
  className,
  style,
  sx = {},
  'data-test-id': dataTestId,
}: StatisticProps): ReactElement => {
  return (
    <StatisticContainer
      id={id}
      className={className}
      style={{ ...style, ...css(sx) }}
      data-test-id={dataTestId}
      themeAlign={align}
    >
      <StyledTitleWrapper themeIntent={intent}>{title}</StyledTitleWrapper>
      <StyledContentWrapper>
        {prefix !== undefined && (
          <StyledPrefixWrapper themeIntent={intent}>
            {prefix}
          </StyledPrefixWrapper>
        )}
        <StyledValueWrapper themeIntent={intent}>{value}</StyledValueWrapper>
        {suffix !== undefined && (
          <StyledSuffixWrapper themeIntent={intent}>
            {suffix}
          </StyledSuffixWrapper>
        )}
      </StyledContentWrapper>
    </StatisticContainer>
  );
};

export default Statistic;