import React,{PropTypes} from 'react';
import ReactDOM from 'react-dom';  
import cx from 'classnames';
import s from './Custom.scss'; 


class Alert extends React.Component {
    constructor(props) {
        super(props);
        this.minusSecond=this.minusSecond.bind(this);
        this.state={
            second:17,
            style:{}
        }
    }
    static propTypes = {    
        autoHide:PropTypes.bool
    } 
    static defaultProps={  
        messageBlock:'success', //success|info|warning|danger
        autoHide:false
    } 
    minusSecond(){
        let {second}=this.state;
        if(second>0){
            this.setState({
                'second':second-1,
                style:{opacity:second*0.059}
            }); 
        }
    }
    componentDidMount(){ 
        const {autoHide}=this.props;
        const {second}=this.state,self=this;
        if(autoHide){
            this.timer=setInterval(this.minusSecond,300);
        }
    }  
    componentWillReceiveProps(nextProps){   
    }
    componentDidUpdate(prevProps,prevState){  
    }
    componentWillUnmount() {  
        clearInterval(this.timer);
    }  
    render(){    
        const {messageBlock,autoHide}=this.props;
        const {second,style}=this.state;
        if(autoHide&&second<=0){
            return null;
        }else{
            return (<div className={cx(s.alert,s['alert_'+messageBlock])} style={style}>
                {this.props.children}
            </div>)
        }
    }
}



export default Alert;