import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import { t } from 'Framework/i18n';
import withWidth from '@material-ui/core/withWidth';
import DialogContent from '@material-ui/core/DialogContent';
import DialogActions from '@material-ui/core/DialogActions';
import { grey } from '@material-ui/core/colors';
import Typography from '@material-ui/core/Typography';
import { Services } from 'App/ServiceLocator';
import PropTypes from 'prop-types';
import CustomDialog from 'Shared/Components/CustomDialog';
import MainButton from 'Shared/Components/MainButton';

const styles = theme => ({
    dialogTitleRoot: {
        padding: '12px 12px 20px',
        fontSize: '1.5rem',
        fontWeight: 400,
    },
    dialogContentRoot: {
        padding: '0 24px 24px 12px',
    },
    pdfDownloadDialog: {
        borderTop: '7px solid ' + theme.palette.primary.main,
    },
    activeButton: {
        textTransform: 'none',
        whiteSpace: 'nowrap',
        padding: '4px 15px',
        backgroundColor: grey[900],
        color: 'white',
        textDecoration: 'none',
        '&:hover': {
            backgroundColor: grey[700],
        },
    },
    activeButtonLabel: {
        color: 'white',
    },
    TypographyCaption: {
        fontSize: 12,
        lineHeight: 1.7,
    },
});
class PdfDownload extends React.Component {
    static propTypes = {
        classes: PropTypes.object,
        onClose: PropTypes.func,
        show: PropTypes.bool,
    };
    state = {
        pdfUrl: '',
    };
    componentDidUpdate(prevProps) {
        const { show } = this.props;
        if (show && prevProps.show !== show) {
            this.creatPdfUrl();
        }
    }
    creatPdfUrl = async () => {
        const pdfUrl = await Services.interaction.createPdfUrl('user');
        this.setState({
            pdfUrl,
        });
    };
    render() {
        const { classes, show, onClose } = this.props;

        return (
            <CustomDialog
                open={show}
                onClose={onClose}
                dialogTitle={t('pdfDownloadDialog.title')}
                onCancel={onClose}
            >
                <DialogContent className={classes.dialogContentRoot}>
                    <Typography
                        variant="body1"
                        classes={{ root: classes.TypographyCaption }}
                        id="alert-dialog-description"
                    >
                        {t('pdfDownloadDialog.content')}
                    </Typography>
                </DialogContent>
                <DialogActions>
                    <MainButton
                        href={this.state.pdfUrl}
                        target="_blank"
                        variant="contained"
                        classes={{
                            root: classes.activeButton,
                            label: classes.activeButtonLabel,
                        }}
                    >
                        {t('pdfDownloadDialog.actionButton')}
                    </MainButton>
                </DialogActions>
            </CustomDialog>
        );
    }
}

export default withWidth()(withStyles(styles, { name: 'PdfDownload' })(PdfDownload));
