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

export const ApolloInput = (props: ApolloInputProps) => {
    const { maxLength, onChange, value, style, origin } = props;
    const selfProps = antiAssign(props, [
        'columnConfig',
        'onChange',
        'style',
        'onEmitChange',
        'rowData',
        'tableId',
        'cellRenderProps',
        'maxPopHeight',
        'getPopupContainer',
        'getCalendarContainer',
        'origin',
        'disableOptions',
        'rowId',
        'onBlurFn',
        'getInstanceDetail',
    ]);
    selfProps.disabled = !!props.disabled;
    const [inputVal, setInputVal] = useState(value);
    useEffect(() => {
        setInputVal(value);
    }, [value]);
    const changeValue = (value: any) => {
        if (typeof onChange === 'function') {
            onChange(value);
        }
    };
    const inputOnBlurFn = () => {
        if (typeof onBlurFn === 'function') {
            onBlurFn(props);
        }
    };
    const newStyle: any = {
        ...style,
    };
    const wordNumStyle: any = {};
    if (maxLength) {
        newStyle.paddingRight = '110px';
        if (style && style.minHeight) {
            newStyle.minHeight = Number(style.minHeight) + 10;
            newStyle.paddingRight = '11px';
            newStyle.paddingBottom = '28px';
            wordNumStyle.bottom = '4px';
            wordNumStyle.marginTop = '0';
        }
    }
    return (
        <Consumer>
            {({ locale }) => {
                return (
                    <div className={styles.container}>
                        {origin === 'editForm' ? (
                            <Input
                                className={styles.input}
                                style={newStyle}
                                {...selfProps}
                                value={inputVal}
                                onBlur={inputOnBlurFn}
                                onChange={(e) => {
                                    changeValue(e.target.value);
                                    setInputVal(e.target.value);
                                }}
                            />
                        ) : (
                            <Input
                                className={styles.input}
                                style={newStyle}
                                {...selfProps}
                                onChange={(e) => {
                                    changeValue(e.target.value);
                                }}
                            />
                        )}

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