import { formatEnum } from '@/utils/format';
import { Typography } from 'antd';
import classNames from 'classnames';
import './index.less';

type FormInfoProps = {
  /** 自定义类名 */
  value?: any;
  /** 如果 `value` 是对象时，取对象的哪个属性作为值 */
  valuePropName?: string;
  /** 是否是多行文本 */
  textArea?: boolean;
  /** 是否是下拉框 */
  select?: boolean;
  /** 下拉框数据 */
  options?: { label: string; value: any }[];
  /** 自定义类名 */
  className?: string;
  /** 自定义样式 */
  style?: React.CSSProperties;
};

/**
 * 模拟禁用的输入框，但是内容超长时，hover 时显示所有内容
 */
function FormInfo({
  value,
  valuePropName,
  className,
  select,
  options,
  style,
  textArea = false,
}: FormInfoProps) {
  let data = value;
  if (value && typeof value === 'object' && valuePropName) {
    data = value[valuePropName];
  } else if (select === true && options) {
    data = formatEnum(options)(value);
  }

  return (
    <div
      className={classNames(
        'form-info',
        {
          'form-info--multiline': textArea,
        },
        className,
      )}
      style={style}
    >
      <Typography.Paragraph ellipsis={textArea ? false : { tooltip: data }}>
        {data}
      </Typography.Paragraph>
    </div>
  );
}

export default FormInfo;
