import React from 'react';
import { Spin, Select } from 'antd';
import lodash from 'lodash';
import { Consumer } from '../../../context';
import s from './index.less';

interface Props {
    initDataType?: undefined | 'onfocus'; // 初始化请求方式
    request?: Function;
    selfCom?: any;
    dataSource?: [];
    onChange: Function;
    onBlur?: Function;
    value?: any;
    autoFocus?: boolean;
    mode?: 'multiple' | 'tags' | undefined;
    fieldNames?: {
        value: any;
        label: string;
    };
}

interface State {
    value: any;
    data: any[];
    fetching: boolean;
    fieldNames: any;
    initData: any[];
    searchStr: string;
    canFocus: boolean;
}

class AssociationSearch extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.fetchData = lodash.debounce(this.fetchData, 400);
        this.state = {
            value: undefined,
            data: [],
            fetching: false,
            fieldNames: props.fieldNames || { label: 'label', value: 'value' },
            initData: [],
            searchStr: '',
            canFocus: true,
        };
    }

    componentDidMount() {
        const { value, initDataType } = this.props;
        const formatValue = this.formaterValue(value);
        this.setState({ value: formatValue || undefined });
        if (!initDataType) {
            this.fetchData('', true);
        }
    }

    UNSAFE_componentWillReceiveProps = (nextProps: any) => {
        const { value } = this.props;
        const { data, initData } = this.state;
        if (JSON.stringify(nextProps.value) !== JSON.stringify(value)) {
            const vas = nextProps.value || undefined;
            let newData = data.slice();
            if (vas === undefined || vas === null) {
                newData = initData.slice();
            } else if (typeof vas === 'object') {
                if (!vas.label || !vas.label.length) {
                    newData = initData.slice();
                }
            }
            this.setState({ value: this.formaterValue(vas), data: newData });
            this.addValueOptions(vas);
        }
    };

    fetchData = async (val: string, isDefault = false) => {
        let data: any[] = [];
        const { request, dataSource } = this.props;
        if (request) {
            this.setState({ fetching: true });
            const response = await request(val);
            if (response && response.data && response.success) {
                const resData = Array.isArray(response.data) ? response.data : response.data.list;
                data = Array.isArray(resData) ? resData : [];
                data = this.formaterData(data);
                if (isDefault) {
                    this.setState({ initData: data.slice() });
                }
            }
        } else {
            data = Array.isArray(dataSource) ? dataSource : [];
        }
        this.setState({ data, fetching: false });
    };

    onSearch = (val: string) => {
        const { initData } = this.state;
        this.setState({ searchStr: val });
        if (val) {
            this.fetchData(val);
        } else {
            this.setState({
                data: initData.slice(),
            });
        }
    };

    onFocus = () => {
        const { initDataType } = this.props;
        const { searchStr, canFocus, fetching } = this.state;
        if (initDataType === 'onfocus' && canFocus && !fetching) {
            this.setState({ data: [], canFocus: false });
            this.fetchData(searchStr, true);
        }
    };

    onBlur = () => {
        const { onBlur } = this.props;
        this.setState({ searchStr: '', canFocus: true });
        if (typeof onBlur === 'function') {
            onBlur();
        }
    };

    formaterData = (data: any) => {
        const { fieldNames } = this.state;
        if (fieldNames) {
            const { value, label } = fieldNames;
            return data.map((item: any) => {
                return {
                    ...item,
                    value: typeof value === 'function' ? value(item) : item[value],
                    label: item[label],
                };
            });
        }
        return data;
    };

    formaterValue = (item: any) => {
        const { fieldNames } = this.state;
        if (!item) return item;
        if (fieldNames && item) {
            const { value, label } = fieldNames;
            if (Array.isArray(item)) {
                return item.map((ls: any) => {
                    return {
                        value: ls.value || ls.value === 0 ? ls.value : ls[value],
                        key: ls.value || ls.value === 0 ? ls.value : ls[value],
                        label: ls.label || ls[label],
                    };
                });
            }
            return {
                value: item.value || item.value === 0 ? item.value : item[value],
                key: item.value || item.value === 0 ? item.value : item[value],
                label: item.label || item[label],
            };
        }
    };

    addValueOptions = (values: any) => {
        if (values === undefined) return values;
        const { data } = this.state;
        if (typeof values === 'object') {
            const newData: any[] = [];
            const valueArr = Array.isArray(values) ? values : [values];
            // 显示旧数据->显示新数据
            [...data, ...valueArr].forEach((item: any) => {
                const index = newData.findIndex((ls: any) => {
                    return ls.value === item.value;
                });
                if (index < 0) {
                    newData.push(item);
                }
            });
            this.setState({ data: newData });
        }
    };

    handleChange = (item: any) => {
        const { onChange } = this.props;
        const { data } = this.state;
        if (onChange) {
            if (Array.isArray(item)) {
                const itemData = item.map((temp: any) => {
                    return {
                        ...temp,
                        value: temp.key,
                        ...(data.find((ls: any) => {
                            return ls.value === temp.key;
                        }) || {}),
                    };
                });
                onChange(itemData);
            } else if (item) {
                onChange({
                    ...item,
                    value: item.key,
                    ...(data.find((ls: any) => {
                        return ls.value === item.key;
                    }) || {}),
                });
            } else {
                // 集成清空操作
                onChange(item);
            }
        }
    };

    notFoundContent = (locale) => {
        const { data, fetching, value } = this.state;
        if (fetching) {
            return <Spin size="small" />;
        }
        if (!data || data.length === 0) {
            return <span style={{ fontSize: '12px' }}>{locale.notFoundContent}</span>;
        }
        return null;
    };

    render() {
        const { data, fetching, value } = this.state;
        const { selfCom, autoFocus, onChange, ...rest } = this.props;
        return (
            <Consumer>
                {({ locale }) => {
                    return (
                        <Select
                            filterOption={false}
                            {...rest}
                            value={value}
                            showSearch={true}
                            labelInValue={true}
                            notFoundContent={this.notFoundContent(locale)}
                            onSearch={this.onSearch}
                            onChange={this.handleChange}
                            onFocus={this.onFocus}
                            onBlur={this.onBlur}
                        >
                            {data.map((d: any) => {
                                return (
                                    <Select.Option key={d.value} value={d.value}>
                                        {d.label}
                                    </Select.Option>
                                );
                            })}
                        </Select>
                    );
                }}
            </Consumer>
        );
    }
}

export default AssociationSearch;
