import React from 'react';
import { makeStyles } 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 Typography from '@material-ui/core/Typography';
import CustomDialog from 'Shared/Components/CustomDialog';
import MainButton from 'Shared/Components/MainButton';
import PropTypes from 'prop-types';

const useStyles = makeStyles(
    theme => ({
        dialogTitleRoot: {
            padding: '12px 12px 20px',
            fontSize: '1.5rem',
            fontWeight: 400,
        },
        dialogContentRoot: {
            padding: '0 24px 24px 12px',
        },
        sendEmailDialog: {
            borderTop: '7px solid ' + theme.palette.primary.main,
        },
        activeButton: {
            padding: '4px 15px',
            textDecoration: 'none',
        },
        TypographyCaption: {
            fontSize: 12,
            lineHeight: 1.7,
        },
    }),
    { name: 'SendEmail' }
);

const SendEmail = props => {
    const { show, shareUrl, onClose } = props;
    const emailUrl = `mailto:?subject=${t('share.email.subject')}&body=${t('share.email.body', {
        shareUrl: window.encodeURIComponent(shareUrl),
    })}`;

    const classes = useStyles();

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

SendEmail.propTypes = {
    onClose: PropTypes.func,
    show: PropTypes.bool,
    shareUrl: PropTypes.string.isRequired,
};

export default withWidth({ initialWidth: 'lg' })(SendEmail);
