import React from 'react';
import {Renderer, RendererProps} from '../factory';
import {filter} from '../utils/tpl';
import cx from 'classnames';
import {BaseSchema, SchemaTpl} from '../Schema';
import {getPropValue} from '../utils/helper';

/**
 * Plain 纯文本渲染器
 */
export interface PlainSchema extends BaseSchema {
  /**
   * 指定为模板渲染器。
   *
   */
  type: 'plain' | 'text';

  tpl?: SchemaTpl;
  text?: SchemaTpl;

  /**
   * 是否内联显示？
   */
  inline?: boolean;

  /**
   * 占位符
   * @deprecated -
   */
  placeholder?: string;
}
export interface PlainProps
  extends RendererProps,
    Omit<PlainSchema, 'type' | 'className'> {
  wrapperComponent?: any;
}

export class Plain extends React.Component<PlainProps, object> {
  static defaultProps: Partial<PlainProps> = {
    wrapperComponent: '',
    inline: true,
    placeholder: '-'
  };

  render() {
    const {
      className,
      wrapperComponent,
      text,
      data,
      tpl,
      inline,
      placeholder,
      classnames: cx,
      ellipsis = false,
      width = ''
    } = this.props;
    const value = getPropValue(this.props);
    const Component = wrapperComponent || (inline ? 'span' : 'div');
    const _val = tpl || text ? (
        filter(tpl || (text as string), data)
      ) : typeof value === 'undefined' || value === '' || value === null ? (
        <span className="text-muted">{placeholder}</span>
      ) : (
        String(value)
      )
    const showTit = ellipsis && !/%$/.test(String(width)) && width
    return (
      <Component className={cx('PlainField', className)} title={ showTit ? _val: '' }>
        {_val}
      </Component>
    );
  }
}

@Renderer({
  test: /(^|\/)(?:plain|text)$/,
  name: 'plain'
})
export class PlainRenderer extends Plain {}
