import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames/bind';
import styles from './typography.scss';

const Text = ({
  children,
  theme,
  bold,
  underline,
  mark,
  onClick,
  link,
  inverse,
  small,
  push,
}) => {
  const cx = classnames.bind(styles);

  const themes = {
    success: 'typography_text__success',
    warning: 'typography_text__warning',
    danger: 'typography_text__danger',
    inverse: 'typography_text__inverse',
  };

  return (
    <span
      {...((onClick || link) && {
        onClick,
        onKeyPress: onClick,
        tabIndex: 0,
        role: link ? 'link' : 'button',
      })}
      className={cx('typography', 'typography_text', [themes[theme]], {
        typography__underline: underline,
        typography__mark: mark,
        typography__bold: bold,
        typography__inverse: inverse,
        typography__small: small,
        typography_text__not_clickable: !onClick && !link,
        typography_text__link: link,
        typography_text__push: push,
      })}
    >
      {children}
    </span>
  );
};

Text.defaultProps = {
  bold: false,
  link: false,
  mark: false,
  onClick: undefined,
  push: false,
  small: false,
  theme: null,
  underline: false,
  inverse: false,
};

Text.propTypes = {
  bold: PropTypes.bool,
  children: PropTypes.node.isRequired,
  link: PropTypes.bool,
  mark: PropTypes.bool,
  onClick: PropTypes.func,
  push: PropTypes.bool,
  small: PropTypes.bool,
  theme: PropTypes.oneOf(['success', 'warning', 'danger']),
  underline: PropTypes.bool,
  inverse: PropTypes.bool,
};

export default Text;