import React from 'react';
import PropTypes from 'prop-types';
import classNames from "classnames";
import {Form} from '@alicd/next';

class FormItem extends React.Component {

  static propTypes = {
    showValidateType: PropTypes.oneOf([
      'help', 'tooltip'
    ]),
    validateTooltipAlign: PropTypes.oneOf([
      "tl", "tr", "bl", "br",
    ]),
  };

  static defaultProps = {
    showValidateType: 'help',
    validateTooltipAlign: "tl",
  };

  render() {
    const child = this.props.children;
    const {label, labelCol, wrapperCol, help, extra, hasFeedback, style, className: classNameOrg, size, validateTooltipAlign } = this.props;
    const className = classNames(classNameOrg, size ? [`next-form-item-${size}`] : []);
    if (this.props.showValidateType === 'tooltip') {
      return (<Form.Item
        label={label}
        labelCol={labelCol}
        wrapperCol={wrapperCol}
        extra={extra}
        style={style}
        size={size}
        className={classNames(
          className,
          "form-tooltip-explain",
          `form-tooltip-explain-${validateTooltipAlign}`)}
        hasFeedback={hasFeedback} >
        {child || this.props.value}
        <span className="form-tooltip-explain-help">{help}</span>
      </Form.Item>);
    } else {
      return (<Form.Item
        label={label}
        help={help}
        labelCol={labelCol}
        wrapperCol={wrapperCol}
        extra={extra}
        style={style}
        size={size}
        className={className}
        hasFeedback={hasFeedback} >{child || this.props.value}</Form.Item>);
    }
  }
}

export default FormItem;