import React from 'react';
import styles from './toast.scss';
import {checkDeepEquals} from '../../UtilitiesFunctions/objectUtilities';


export default class Toast extends React.Component {

    constructor(props) {
        super(props);
        if(props.toastData && props.toastData !== {}){
            this.state = {toastData: (props.toastData)?props.toastData:{}, showToast: true};
            let _self = this;
            setTimeout(() => {
                _self.setState({showToast: false, toastData: {}});
                this.props.onRemove();
            }, 5000)
        }
        else
            this.state = {toastData: {},showToast: false};
    }

    componentDidMount(){
    }

    componentWillReceiveProps(nextProps){
        if(nextProps.toastData && nextProps.toastData !== {}){
            this.setState({toastData: (nextProps.toastData)?nextProps.toastData:{}, showToast: true});
            let _self = this;
            setTimeout(() => {
                _self.setState({showToast: false, toastData: {}});
                this.props.onRemove();
            }, 5000)
        }
    }

    removeToast(){
        this.setState({showToast: false});
        this.props.onRemove();
    }

    render() {
        // console.log("****** Toast.js props:", this.props);

        let str;
        var Component=null;
        if((this.props.errorDataType == "array") && this.props.errors && this.props.errors.length ){
            str = this.props.errors.join(', ');
        }
        if(this.props.toastData && this.props.toastData.message){
            str = this.props.toastData.message;
        }
        if(this.props.toastData && this.props.toastData.link && this.props.toastData.linkText){
            str = <div>{str}<a className="toastLink" target="_blank" href={this.props.toastData.link}>{this.props.toastData.linkText}</a></div>
        }
        if(this.props.toastData && this.props.toastData.component){
            Component = this.props.toastData.component
        }
        var evaluatedClass = ((str))?'toast-wrapper active':((Component)?'toast-wrapper active componentType':'toast-wrapper deactive')
        return (
            <div>
                {(this.state.showToast)?
                <div className={evaluatedClass}>
                    {str}
                    { Component && <div className="contextBlocker"></div>}
                    { Component && <Component /> }
                    <div className="cancelToast" onClick={()=>{this.removeToast()}}>
                        <i className="material-icons">cancel</i>
                    </div>
                </div>
                    :''
                }
            </div>
        );
    }
};

