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

export const ApolloTextArea = (props: ApolloTextAreaProps) => {
    const {
        maxLength,
        onChange,
        value,
        getDetail,
        rowId,
        onEmitChange,
        columnConfig,
        origin,
        tableId,
        maxPopHeight,
    } = props;
    const { columnName } = columnConfig;
    const selfProps = antiAssign(props, [
        'columnConfig',
        'onChange',
        'cutLength',
        'getDetail',
        'onEmitChange',
        'rowData',
        'tableId',
        'cellRenderProps',
        'maxPopHeight',
        'getPopupContainer',
        'getCalendarContainer',
        'origin',
        'disableOptions',
        'rowId',
        'onBlurFn',
        'getInstanceDetail',
    ]);
    selfProps.disabled = !!props.disabled;
    const [curValue, setCurValue] = useState(value);
    const divInput = useRef(null);
    useEffect(() => {
        if (origin !== 'editForm') {
            getMore();
            if (divInput && divInput.current) {
                placeCaretAtEnd(divInput.current);
            }
        }
    }, []);

    const getMore = async () => {
        if (getDetail && rowId) {
            let newValue = await getDetail({ rowId });
            if (newValue) {
                newValue = newValue[0] && newValue[0].value;
                setCurValue(newValue);
            }
        }
    };

    const changeValue = (e: any) => {
        if (typeof onChange === 'function') {
            onChange(e.target.value);
        }
    };
    const inputOnBlurFn = () => {
        if (origin === 'editForm') {
            if (typeof onBlurFn === 'function') {
                onBlurFn(props);
            }
        } else {
            if (typeof onEmitChange === 'function') {
                onEmitChange(curValue);
            }
        }
    };
    const changeCurValue = (e: any) => {
        if (typeof onChange === 'function') {
            setCurValue(e.target.innerText);
        }
    };

    // 表单部分
    if (origin === 'editForm') {
        return (
            <Consumer>
                {({ locale }) => {
                    return (
                        <div className={styles.container}>
                            <Input.TextArea
                                className={styles.inputForm}
                                {...selfProps}
                                onBlur={inputOnBlurFn}
                                onChange={changeValue}
                            />
                            {!!maxLength && (
                                <span className={styles.wordNumberForm}>
                                    {`${locale.alreadyInput} ${(value || '').length}/${maxLength}`}
                                </span>
                            )}
                        </div>
                    );
                }}
            </Consumer>
        );
    }
    // 表格部分
    const table = document.getElementById(`apolloTable_${tableId}`);
    const cell = document.getElementById(`cellUnit_${tableId}_${rowId}_${columnName}`);
    const tableRect = table && table.getBoundingClientRect();
    const cellRect = cell && cell.getBoundingClientRect();
    const style: any = {};
    if (maxPopHeight) {
        style.maxHeight = maxPopHeight;
    }
    if (tableRect && cellRect && maxPopHeight && maxPopHeight + cellRect.top > tableRect.bottom) {
        style.bottom = 0;
        style.top = 'auto';
    }

    return (
        <Consumer>
            {({ locale }) => {
                return (
                    <div className={styles.tableCell} style={style}>
                        <div
                            ref={divInput}
                            contentEditable={!selfProps.disabled}
                            className={styles.divInput}
                            {...selfProps}
                            onBlur={inputOnBlurFn}
                            onInput={changeCurValue}
                        >
                            {value}
                        </div>
                        {!!maxLength && (
                            <span className={styles.numTip}>
                                {`${locale.alreadyInput} ${(curValue || '').length}/${maxLength}`}
                            </span>
                        )}
                    </div>
                );
            }}
        </Consumer>
    );
};