import React, { createRef } from 'react';
import ReactDOM from 'react-dom';
import MessageHub from './message';

let ref: any;

const mount = () => {
    let kwaiMessageMount = document.getElementById('kwaiMessageMount');
    ref = createRef();
    if (!kwaiMessageMount) {
        document.body.insertAdjacentHTML('beforeend', '<div id="kwaiMessageMount"></div>');
        kwaiMessageMount = document.getElementById('kwaiMessageMount');
        ReactDOM.render(<MessageHub ref={ref} type="message" />, kwaiMessageMount);
    } else {
        //ReactDOM.unmountComponentAtNode(kwaiMessageMount);
        ReactDOM.render(<MessageHub ref={ref} type="message" />, kwaiMessageMount);
    }
};

mount();

export default {
    info: function(msg: string, timeout = 2000, showProgress = false) {
        return (ref.current as any)(msg, { timeout, type: 'info', showProgress });
    },
    error: function(msg: string, timeout = 2000, showProgress = false) {
        return (ref.current as any)(msg, { timeout, type: 'error', showProgress });
    },
    success: function(msg: string, timeout = 2000, showProgress = false) {
        return (ref.current as any)(msg, { timeout, type: 'success', showProgress });
    },
    warning: function(msg: string, timeout = 2000, showProgress = false) {
        return (ref.current as any)(msg, { timeout, type: 'warning', showProgress });
    },
    pending: function(msg: string) {
        return (ref.current as any)(msg, { timeout: Infinity, type: 'pending' });
    },
};