import React from 'react';
import _ from 'lodash';
import { config } from '../config';
import styles from './styles.less';
import { transferAttr } from '../_utils/transferAttr';
import { BaseComponentProps } from '@/apollo-table/component/interface';
import Text from './input';

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

export const getDetail = (type: string) => {
    const NodeObj = config[type] || {};
    const Node = NodeObj.detail || Text; //  默认文本类型
    if (!NodeObj.detail) {
        console.warn(NodeObj.name + '---详情组件暂未定义,默认使用文本类型');
    }
    return class extends React.Component {
        state = {
            value: undefined,
        };
        shouldComponentUpdate(nextProps: BaseComponentProps) {
            return !_.isEqual(this.props, nextProps);
        }

        render() {
            const {
                columnConfig: { columnAttrObj, columnType },
                value,
            } = this.props;
            const newProps = {
                ...(NodeObj.componentAttr || {}),
                ...(columnAttrObj || {}),
            };
            let transferColumn = transferAttr(columnType, newProps);

            return Node ? (
                <div className={styles.container}>
                    <Node
                        {...this.props}
                        componentAttr={transferColumn}
                        formatter={NodeObj.getFormatter}
                        value={value}
                        onChange={this.onChange}
                    />
                </div>
            ) : null;
        }
    };
};