import React from 'react';
import withStyles from "@material-ui/core/styles/withStyles";
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import Zoom from '@material-ui/core/Zoom';
import Typography from "@material-ui/core/Typography/Typography";
import {inject, observer} from "mobx-react";
import withMobileDialog from '@material-ui/core/withMobileDialog';

function Transition(props) {
    return <Zoom in={true} {...props} />;
}

@inject('store')
@observer
class AlertSuccess extends React.Component{
    // state = {
    //     open: this.props.open,
    //     callback : this.props.onClose
    // };

    constructor(props){
        super(props);
        this.global_ui = props.store.global_ui;
    }

    // componentDidUpdate(prevProps){
    //     if (this.props.open !== prevProps.open) {
    //         this.setState({open : this.props.open});
    //     }
    // }

    handleClose = () => {
        this.global_ui.closeAlert();
    };

    onActionClick = async ()=>{
        if(typeof this.global_ui.successAlertCB === 'function') {
            let cbResult = this.global_ui.successAlertCB();
            if(cbResult && cbResult.then && typeof cbResult.then === 'function'){
                await cbResult
            }
        }
        this.global_ui.closeAlert()
    };

    renderIcon = (type)=>{
        if(type === 'success'){
            return <img src={require('../../../../assets/images/login/success_new.gif')}/>
        }
        else {
            return (<Zoom in={true}>
                <img src={require('../../../../assets/images/login/error.png')} width={"30%"} style={{transitionDelay: '2000ms',marginBottom : 20}}/>
            </Zoom>)
        }
    };

    render() {
            let actions = this.props.actions.length ? this.props.actions : [<Button onClick={this.onActionClick} color="primary">Ok</Button>];
            const { fullScreen } = this.props;
            return (
            <Dialog
                open={this.global_ui.alertDialog.open}
                TransitionComponent={Transition}
                keepMounted
                fullWidth
                fullScreen={fullScreen}
                onClose={this.handleClose}
                aria-labelledby="alert-dialog-slide-title"
                aria-describedby="alert-dialog-slide-description"
                disableBackdropClick
                disableEscapeKeyDown
            >
                        <DialogContent style={{display:'flex',alignItems : 'center',justifyContent : 'center',flexDirection : 'column'}}>
                                {
                                    this.renderIcon(this.global_ui.alertDialog.type)
                                }

                                <Typography variant={"h6"} gutterBottom={true}>
                                    {this.global_ui.alertDialog.title}
                                </Typography>
                                <Typography variant={"subtitle2"} gutterBottom={true}>
                                    {this.global_ui.alertDialog.subtitle}
                                </Typography>
                        </DialogContent>
                <DialogActions>
                    {
                        actions.map(it=>it)
                    }
                </DialogActions>
            </Dialog>
        );
    }
}

AlertSuccess.defaultProps = {
    open : false,
    title : 'Alert',
    subtitle : '',
    onClose : ()=>{},
    actions : [],
    type : 'error'
};

export default withMobileDialog()(AlertSuccess);