/* eslint-disable react/jsx-props-no-spreading */
import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';
import { withTheme } from '../styles';

import { OverflowText, OverflowParagraph, NormalText } from './Text.style';

const TextComponent = forwardRef((props, ref) => {
  if (props.textOverflow && props.lines > 1) {
    return (
      <OverflowParagraph
        ref={ref}
        tx="text"
        color="text"
        lineHeight={1.5}
        {...props}
      />
    );
  }

  if (props.textOverflow) {
    return (
      <OverflowText
        ref={ref}
        color="text"
        tx="text"
        lineHeight={1.5}
        {...props}
      />
    );
  }

  return (
    <NormalText ref={ref} color="text" tx="text" lineHeight={1.5} {...props} />
  );
});

TextComponent.propTypes = {
  textOverflow: PropTypes.bool,
  lines: PropTypes.number,
};

TextComponent.defaultProps = {
  textOverflow: false,
  lines: 1,
};

TextComponent.displayName = 'Text';

export default withTheme(TextComponent);