import 'design/style/Modal'

import React from 'react'
import classnames from 'classnames'
import { render, unmountComponentAtNode } from 'react-dom'

const prefix = 'Modal--';
let instances = [];

export default class Modal extends React.Component {

    constructor(args) {
        super(args);
    }

    componentWillUnmount() {
        this._closeModal();
    }

    _closeModal() {
        // multiple react instances error hack;
        
        let target_id = instances.pop();
        let target = document.getElementById(target_id);
        target && setTimeout(() => {
            unmountComponentAtNode(target);
            document.body.removeChild(target);
        }, 0);
    }

    onClose(isOk) {
        this.props.onClose && this.props.onClose(isOk);
        this._closeModal(); 
    }

    onBackdropClick(e) {
        if(this.props.backdropCloseable && 
            e.target === this.refs.modal) {
                this.props.onClose && this.props.onClose();
                this._closeModal();
            }
    }

    render() {
        const {
            className, children, ...others
        } = this.props;

        const classes = classnames({
            'Modal': true,
            [className]: className,
            'Modal--small': this.props.type === 'small'
        });

        return (
            <div
                {...others}
                className = {classes}
                ref="modal"
                onClick={this.onBackdropClick.bind(this)}>
                <div className="Modal__container">
                    <div className="Modal__header">
                        { this.props.header ?
                            this.props.header :
                            <h3> { this.props.title } </h3> 
                        }
                        { !this.props.header && 
                            this.props.type !== 'small' && 
                            <span href="javascript:void(0)" 
                                className="Modal__close"
                                title="关闭"
                                onClick={this.onClose.bind(this, false)}>
                               &times;
                            </span> 
                        }
                    </div>
                    <div className="Modal__content">
                    { this.props.children }
                    </div>
                    <div className="Modal__footer">
                    { !this.props.footer &&
                        !!this.props.okText && 
                        <span className="Modal__btn"
                            onClick={this.onClose.bind(this, true)}>
                        { this.props.okText } 
                        </span> 
                    }
                    { !this.props.footer &&
                        !!this.props.cancelText && 
                        <span className="Modal__btn"
                            onClick={this.onClose.bind(this, false)}> 
                        { this.props.cancelText } 
                        </span> 
                    }
                    { !!this.props.footer && this.props.footer }
                    </div>
                </div>
            </div>
        )
    }

}

Modal.propTypes = {
    className: React.PropTypes.string,
};

Modal.defaultProps = {
    onClick() {},
};

Modal.open = Modal.show = (modal) => {
    let target = document.createElement('div');
    let target_id = `vu-modal-${Date.now()}`;
    instances.push(target_id);
    target.id = target_id;
    document.body.appendChild(target);
    render(modal, target);
}

Modal.close = Modal.hide = () => {
    let target_id = instances.pop();
    let target = document.getElementById(target_id);
    target && setTimeout(() => {
        unmountComponentAtNode(target);
        document.body.removeChild(target);
    }, 0);
}