import React, { Component } from 'react';
import ReactDom from 'react-dom';
import hocImmutable, { imShallowEqual } from '../../utils/HOC/hocImmutable';
import { Modal } from 'antd';
import Button from '../button';
import AlertMessage from './AlertMessage';
import confirm from './Confirm';
import './style.less';

const Comp = hocImmutable(class extends Component {
    constructor(props) {
        super(props);
    }
    state = {
        visible: true,
        cancelLoading: false,
        okLoading: false
    }
    store = {
        actionClicked: false
    }
    componentWillMount() {
        const { visible = true } = this.props;
        this.setState({
            visible
        })
    }
    componentWillReceiveProps(nextProps) {
        const { visible = true } = nextProps;
        if (this.state.visible !== visible) {
            this.store.actionClicked = false;
            this.setState({
                visible,
                cancelLoading: false,
                okLoading: false
            });
        }
    }
    onOk = () => {
        if (this.store.actionClicked) return;
        this.store.actionClicked = true;
        const { onOk } = this.props;
        const result = typeof onOk === 'function' && onOk();
        if (result && typeof result.then === 'function') {
            this.setState({ okLoading: true });
            result.then(() => {
                this.setState({ visible: false, okLoading: false });
            })
        } else {
            this.setState({ visible: false });
        }
    }
    onCancel = () => {
        if (this.store.actionClicked) return;
        this.store.actionClicked = true;
        const { onCancel } = this.props;
        const result = typeof onCancel === 'function' && onCancel();
        if (result && typeof result.then === 'function') {
            this.setState({ cancelLoading: true });
            result.then(() => {
                this.setState({ visible: false, cancelLoading: false });
            })
        } else {
            this.setState({ visible: false });
        }
    }
    render() {
        const { visible = true, okText, cancelText, onOk, onCancel, footer, children, ...props } = this.props;
        return (
            <Modal {...props} visible={this.state.visible}
                onCancel={this.onCancel}
                footer={footer === undefined ?
                    <div>
                        <Button className='btn-cancel' icon={this.state.cancelLoading ? 'loading' : 'close'} key='cancel' type='ghost' size='default' onClick={this.onCancel}>
                            {cancelText || '取消'}
                        </Button>
                        <Button className='btn-ok' icon={this.state.okLoading ? 'loading' : 'check'} key='ok' type='primary' size='default' onClick={this.onOk}>
                            {okText || '确定'}
                        </Button>
                    </div> : footer
                }
            >
                {children}
            </Modal >
        )
    }
});

const CompInstance = class extends Component {
    constructor(props) {
        super(props);
    }
    componentWillUnmount() {
        const { afterClose } = this.props;
        afterClose && afterClose();
    }
    afterClose = () => {
        const div = document.getElementById(this.props['data-render-pid']);
        if (div) {
            const unmountResult = ReactDOM.unmountComponentAtNode(div);
            if (unmountResult && div.parentNode) {
                div.parentNode.removeChild(div);
            }
        }
    }
    render() {
        const { content, afterClose, ...props } = this.props;
        return <Comp {...props}
            visible={true}
            children={content}
            afterClose={this.afterClose}
        />
    }
}

let idx = 0;
Comp.show = ({ duration = 0, ...options }) => {
    const div = document.createElement('div');
    div.id = 'global-modal-show-' + (++idx) + '-' + Date.now();
    document.body.appendChild(div);
    const instance = ReactDom.render(<CompInstance {...options} data-render-pid={div.id} />, div);
    const destroy = () => {
        const unmountResult = ReactDOM.unmountComponentAtNode(div);
        if (unmountResult && div.parentNode) {
            div.parentNode.removeChild(div);
        }
    }
    if (duration > 0) {
        setTimeout(() => destroy(), duration * 1000);
    }
    return { destroy };
}

Comp.info = (options) => {
    return AlertMessage.show({ ...options, type: 'info' })
}
Comp.success = (options) => {
    return AlertMessage.show({ ...options, type: 'success' })
}
Comp.error = (options) => {
    return AlertMessage.show({ ...options, type: 'error' })
}
Comp.warn = (options) => {
    return AlertMessage.show({ ...options, type: 'warn' })
}
Comp.warning = Comp.warn;
Comp.confirm = confirm;

export default Comp;