import * as React from 'react';
import './index.css';

import * as PropTypes from 'prop-types';

import classNames from '../../utils/classnames';

export default function Text({
  text,
  maxLines = 2,
  space,
  userSelect = true,
  style = {},
  className,
  events,
  id,
  ...props
}) {
  const textStyle = {
    WebkitLineClamp: maxLines,
    whiteSpace: space ? 'pre-wrap' : 'pre-line',
  };

  if (!userSelect) {
    textStyle.userSelect = 'none';
  }
  const { contenteditable, onInput, onBlur } = props;
  return (
    <p
      contentEditable={contenteditable}
      onInput={onInput}
      onBlur={onBlur}
      style={{ ...textStyle, ...style }}
      className={classNames('weda-text', 'weda-ui', className)}
      id={id}
      onClick={(e) => events.tap({}, { originEvent: e })}
    >
      {text}
    </p>
  );
}

Text.propTypes = {
  /**
   * 文本内容
   */
  text: PropTypes.string,
  /**
   * 最大显示行数。0 表示无限制
   */
  maxLines: PropTypes.number,
  /**
   * 是否显示连续空格
   */
  space: PropTypes.bool,
  userSelect: PropTypes.bool,
  events: PropTypes.objectOf(PropTypes.func),
  style: PropTypes.object,
  className: PropTypes.string,
  id: PropTypes.string,
  contenteditable: PropTypes.oneOf([PropTypes.string, PropTypes.bool]),
  onInput: PropTypes.func,
  onBlur: PropTypes.func,
};

Text.defaultProps = {
  maxLines: 2,
  text: '文本内容',
  space: false,
  userSelect: true,
};
