import { Input, InputProps } from '@tarojs/components';

import './index.less';

interface IProps extends InputProps {
  rightText?: string;
  maxLengthTips?: boolean;
}

const PREFIX = 'bl-form-input';

function BlFormInput(props: IProps) {
  const { value, maxlength = 140, maxLengthTips, rightText, onInput, ...otherProps } = props;

  return (
    <div className={PREFIX}>
      <Input
        value={value}
        maxlength={maxlength}
        confirmType="done"
        placeholder="请输入"
        onInput={onInput}
        className={`${PREFIX}__input`}
        placeholderClass={`${PREFIX}__input-placeholder`}
        {...otherProps}
      />
      {rightText && <div className={`${PREFIX}__right-text`}>{rightText}</div>}
      {maxLengthTips && maxlength && (
        <div className={`${PREFIX}__max-length-tips`}>{`${(value || '').length}/${maxlength}`}</div>
      )}
    </div>
  );
}

export default BlFormInput;