import React from 'react';
import { config } from '../config';
import styles from './styles.less';
import { transferAttr } from '../_utils/transferAttr';
import { BaseComponentProps } from '../../interface';
import Text from './input';

// 此方法为高阶组件,不应再render里面频繁调用,防止频繁实例化,带来性能上的浪费

export const getDetail = (type: string) => {
    const NodeObj = config[type] || {};
    const Detail = NodeObj.detail || Text; //  默认文本类型
    if (!NodeObj.detail) {
        console.warn(`${NodeObj.name}---详情组件暂未定义,默认使用文本类型`);
    }
    return class extends React.PureComponent<BaseComponentProps> {
        render() {
            const {
                columnConfig: { columnAttrObj, columnType },
                value,
            } = this.props;
            const newProps = {
                ...(NodeObj.componentAttr || {}),
                ...(columnAttrObj || {}),
            };
            const transferColumn = transferAttr(columnType, newProps);

            return (
                <div className={styles.container}>
                    <Detail
                        {...this.props}
                        componentAttr={transferColumn}
                        formatter={NodeObj.getFormatter}
                        value={value}
                    />
                </div>
            );
        }
    };
};