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 Icon from '../icon';
import './style.less';

const Alert = class extends Component {
    constructor(props) {
        super(props);
    }
    store = {
        actionClicked: false
    }
    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);
            }
        }
    }
    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') {
            result.then(() => this.afterClose());
        } else {
            this.afterClose();
        }
    }
    render() {
        const { onOk, afterClose, okText = '确定', ...props } = this.props;
        return <Modal {...props}
            closable={false}
            maskClosable={false}
            visible={true}
            onClose={undefined}
            afterClose={this.afterClose}
            footer={<Button className='btn-ok' key='ok' type='primary' size='default' onClick={this.onOk}>
                {okText}
            </Button >}
        />
    }
}

const getProps = (type, { title = '', content, className = '', onOk, okText = '确定', width = 420, onClose, afterClose, ...options }) => {
    let iconType = 'info-circle';
    switch (type) {
        case 'info': iconType = 'info-circle'; break;
        case 'success': iconType = 'check-circle'; break;
        case 'warn': iconType = 'exclamation-circle'; break;
        case 'error': iconType = 'close-circle'; break;
        default: break;
    }
    return {
        ...options,
        okText,
        width,
        onOk,
        afterClose: afterClose || onClose,
        className: 'global-modal-alert ' + className,
        children: <div className={`global-modal-alert-panel ${title === '' ? 'no-title' : ''}`}>
            <Icon type={iconType} className={'icon ' + type} />
            <div className='title'>{title}</div>
            <div className='content'>{content}</div>
        </div>
    }
}

let idx = 0;
export default {
    show({ type = 'info', duration = 0, ...options }) {
        const div = document.createElement('div');
        div.id = 'global-modal-alertMessage-' + (++idx) + '-' + Date.now();
        document.body.appendChild(div);
        const props = getProps(type, options);
        const instance = ReactDom.render(<Alert {...props} 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 };
    },
    info(options) {
        return this.show({ ...options, type: 'info' });
    },
    success(options) {
        return this.show({ ...options, type: 'success' });
    },
    error(options) {
        return this.show({ ...options, type: 'error' });
    },
    warn(options) {
        return this.show({ ...options, type: 'warn' });
    }
}