import React from 'react';
import { config } from './config';
import { getDetail } from './detail';
import { emptyModel } from './_utils/setFormatter';
import { transferAttr } from './_utils/transferAttr';
import { BaseComponentProps } from '../interface';

// 此方法为高阶组件,不应再render里面频繁调用,防止频繁实例化,带来性能上的浪费
/*
 *@params(type)  string    组件type
 *@return component
 */
export const getComponent = (type: string) => {
    const NodeObj = config[type] || {};
    const Node = NodeObj.component || null;
    if (!Node) {
        console.error(type + '组件未定义');
        return;
    }
    const com = class extends React.Component {
        state = {
            value: undefined,
            columnConfig: {},
        };

        componentDidMount() {
            const { value, columnConfig } = this.props;
            this.setState({ value: this.getFormat(value), columnConfig });
        }

        componentWillReceiveProps(nextProps: BaseComponentProps) {
            if (JSON.stringify(nextProps.value) !== JSON.stringify(this.props.value)) {
                this.setState({ value: this.getFormat(nextProps.value) });
            }
            if (JSON.stringify(nextProps.columnConfig) !== JSON.stringify(this.props.columnConfig)) {
                this.setState({ columnConfig: nextProps.columnConfig });
            }
        }

        setFormat = (values: []) => {
            const { columnConfig } = this.state;
            const { columnAttrObj, columnType } = columnConfig || {};
            if (!values || values.length <= 0) return void 0;
            const value = values[0] || void 0;
            if (!value) return void 0;
            let transferColumn = transferAttr(columnType, {
                ...(NodeObj.componentAttr || {}),
                ...(columnAttrObj || {}),
            });
            if (NodeObj.setFormatr) return NodeObj.setFormatr(value, transferColumn);
            return value;
        };
        getFormat = (value: []) => {
            const { columnConfig } = this.state;
            const { columnAttrObj, columnType } = columnConfig || {};
            if (!value || !Array.isArray(value) || value.length <= 0) return void 0;
            const newValue = value.filter((item: any) => item.value || item.value === 0 || item.label || item.text);
            let transferColumn = transferAttr(columnType, {
                ...(NodeObj.componentAttr || {}),
                ...(columnAttrObj || {}),
            });
            if (NodeObj.getFormatr) {
                return NodeObj.getFormatr(newValue, transferColumn);
            }
            return newValue;
        };
        onChange = ({ changedValue, isBlur }: any) => {
            const value = this.setFormat(changedValue) || emptyModel;
            if (this.props.onChange) {
                this.props.onChange(value);
            }
            if (this.props.changeParams) {
                this.props.changeParams({ value, changedValue, isBlur });
            }
        };

        render() {
            const { ...others } = this.props;
            const { columnConfig } = this.props;
            const { columnAttrObj, columnType } = columnConfig || {};
            let transferColumn = transferAttr(columnType, {
                ...(NodeObj.componentAttr || {}),
                ...(columnAttrObj || {}),
            });
            const newProps = {
                ...others,
                ...(transferColumn || {}),
            };
            return <Node {...newProps} value={this.state.value} onChange={this.onChange} />;
        }
    };
    com.Detail = getDetail(type);
    return com;
};