import React from 'react';
import s from './index.less';
import { antiAssign } from '../../../../utils/utils';

interface Props {
    onEmitChange: Function;
}
interface State {
    value: any;
    option: any;
}
export default function CellContainer<P extends Props>(Comp) {
    return class extends React.Component<P & Props, State> {
        container: any;
        constructor(props) {
            super(props);
            this.state = {
                value: props.value, // 组件的值
                option: undefined, // 选择项
            };
            this.container = React.createRef();
        }
        componentDidMount(): void {
            document.addEventListener('click', this.onBlur, false);
        }
        componentWillUnmount(): void {
            document.removeEventListener('click', this.onBlur, false);
        }
        changeValue = (value: any, option: any) => {
            this.setState({ value, option });
        };
        onBlur = (e: any) => {
            let currTarget = e.target;
            while (currTarget != document) {
                let editing = currTarget.getAttribute('data-editingCell');
                // 当前点击div是正在编辑的cell时，阻止修改回调
                if (editing === '1') {
                    return;
                }
                currTarget = currTarget.parentNode;
            }

            const { onEmitChange } = this.props;
            const { value, option } = this.state;
            if (typeof onEmitChange === 'function') {
                onEmitChange(value, option);
                // 清除所有dom的编辑状态
                const doms = document.querySelectorAll('.cellUnit');
                if (doms) {
                    doms.forEach((item) => {
                        item.setAttribute('data-editingCell', '0');
                    });
                }
            }
        };

        render() {
            const selfProps = antiAssign(this.props, ['onEmitChange', 'onChange', 'value']);
            const { value } = this.state;
            // cellContainer默认将组件中的全局弹框挂载到当前cell上
            return (
                <div className={s.container} ref={this.container}>
                    <Comp
                        {...selfProps}
                        value={value}
                        onChange={this.changeValue}
                        getPopupContainer={() => {
                            return this.container.current;
                        }}
                        getCalendarContainer={() => {
                            return this.container.current;
                        }}
                    />
                </div>
            );
        }
    };
}