import React, { useEffect, useState } from 'react';
import { Input, Modal } from 'antd';
import styles from './styles.less';
import { onBlurFn } from '../onBlurFn';
import { antiAssign } from '../../../../utils/utils';
import { ApolloTextAreaProps } from '../editInterface';
import { Consumer } from '../../../context';

export const ApolloTextArea = (props: ApolloTextAreaProps) => {
    const { maxLength, onChange, value, getDetail, rowData, onEmitChange, columnConfig, origin } = props;
    const { columnChsName } = columnConfig;
    const selfProps = antiAssign(props, [
        'columnConfig',
        'onChange',
        'value',
        'cutLength',
        'getDetail',
        'onEmitChange',
        'rowData',
        'tableId',
        'cellRenderProps',
        'maxPopHeight',
        'getPopupContainer',
        'getCalendarContainer',
    ]);
    const [curValue, setCurValue] = useState(value);
    const [visible, setVisible] = useState(false);
    useEffect(() => {
        if (origin !== 'editForm') {
            setCurValue(value);
            getMore();
        }
    }, [value]);

    const [inputVal, setInputVal] = useState(value);
    useEffect(() => {
        setInputVal(value);
    }, [value]);
    const changeValue = (e: any) => {
        if (typeof onChange === 'function') {
            onChange(e.target.value);
        }
    };
    const inputOnBlurFn = () => {
        if (typeof onBlurFn === 'function') {
            onBlurFn(props);
        }
    };
    const changeCurValue = (e: any) => {
        if (typeof onChange === 'function') {
            setCurValue(e.target.value);
        }
    };

    const hide = () => {
        if (typeof onEmitChange === 'function') {
            onEmitChange(value);
        }
        setVisible(false);
    };

    const confirmChange = () => {
        if (typeof onEmitChange === 'function') {
            onEmitChange(curValue);
        }
        setVisible(false);
    };

    const getMore = async () => {
        if (getDetail && rowData) {
            let newValue = await getDetail({ rowId: rowData.id });
            if (newValue) {
                newValue = newValue[0] && newValue[0].value;
                setCurValue(newValue);
                setVisible(true);
            }
        }
    };
    if (origin === 'editForm') {
        return (
            <Consumer>
                {({ locale }) => {
                    return (
                        <div className={styles.container}>
                            <Input.TextArea
                                className={styles.inputForm}
                                {...selfProps}
                                value={inputVal}
                                onBlur={inputOnBlurFn}
                                onChange={(e) => {
                                    changeValue(e);
                                    setInputVal(e.target.value);
                                }}
                            />

                            {!!maxLength && (
                                <span className={styles.wordNumberForm}>
                                    {`${locale.alreadyInput} ${(value || '').length}/${maxLength}`}
                                </span>
                            )}
                        </div>
                    );
                }}
            </Consumer>
        );
    }

    return (
        <Consumer>
            {({ locale }) => {
                return (
                    <div className={styles.container}>
                        <Input className={styles.cellInput} style={selfProps.style} value={value} />
                        <Modal visible={visible} title={columnChsName} onCancel={hide} onOk={confirmChange}>
                            <Input.TextArea
                                className={styles.input}
                                {...selfProps}
                                value={curValue}
                                onChange={changeCurValue}
                            />
                            {!!maxLength && (
                                <span className={styles.wordNumber}>
                                    {`${locale.alreadyInput} ${(curValue || '').length}/${maxLength}`}
                                </span>
                            )}
                        </Modal>
                    </div>
                );
            }}
        </Consumer>
    );
};