import CustomDialog from 'Shared/Components/CustomDialog';
import { t } from 'Framework/i18n';
import DialogContent from '@material-ui/core/DialogContent';
import TextField from '@material-ui/core/TextField';
import Typography from '@material-ui/core/Typography';
import DialogActions from '@material-ui/core/DialogActions';
import MainButton from 'Shared/Components/MainButton';
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(
    theme => {
        return {
            contentRoot: { margin: '0px auto' },
            customFieldWrapper: {
                display: 'flex',
                justifyContent: 'center',
                fontWeight: 'bold',
                marginTop: 24,
                marginBottom: 32,
            },
            customFieldInput: {
                fontSize: '15px',
                lineHeight: '18px',
                height: 20,
                padding: '10px 16px',
                minWidth: 320,
                [theme.breakpoints.down('xs')]: {
                    padding: '0 5px',
                    height: 56,
                },
            },
            customField: {
                fontSize: '26px',
                borderRadius: 4,
                height: 40,
                fontWeight: 'bold',
                [theme.breakpoints.down('xs')]: {
                    height: 56,
                    width: '100%',
                },
            },
        };
    },
    { name: 'CustomFontOverlay' }
);

export const CustomFontOverlay = props => {
    const { open, onClose, onApply } = props;
    const [customFont, changeCustomFont] = useState('');
    const classes = useStyles();
    const applyCustomFont = customFont => {
        onApply(customFont);
        changeCustomFont('');
    };
    const closeOverlay = () => {
        onClose();
        changeCustomFont('');
    };

    return (
        (open && (
            <CustomDialog
                open={open}
                onClose={closeOverlay}
                onCancel={closeOverlay}
                dialogTitle={t('textControlbox.addCustomFont')}
            >
                <DialogContent className={classes.contentRoot}>
                    <Typography
                        variant="body1"
                        classes={{ root: classes.TypographyCaption }}
                        id="alert-dialog-description"
                    >
                        {t('textControlbox.infoText')}
                    </Typography>
                    <div className={classes.customFieldWrapper}>
                        <TextField
                            classes={{ root: classes.customField }}
                            value={customFont}
                            onChange={evt => changeCustomFont(evt.target.value)}
                            variant="outlined"
                            inputProps={{
                                maxLength: 20,
                            }}
                            InputProps={{
                                classes: {
                                    input: classes.customFieldInput,
                                },
                            }}
                            translate="no"
                        />
                    </div>
                </DialogContent>
                <DialogActions>
                    <MainButton onClick={closeOverlay} size="medium" fullWidth variant="contained">
                        {t('textControlbox.cancel')}
                    </MainButton>
                    <MainButton
                        onClick={() => applyCustomFont(customFont)}
                        size="medium"
                        fullWidth
                        variant="contained"
                    >
                        {t('textControlbox.apply')}
                    </MainButton>
                </DialogActions>
            </CustomDialog>
        )) ||
        null
    );
};

CustomFontOverlay.propTypes = {
    open: PropTypes.bool.isRequired,
    onClose: PropTypes.func.isRequired,
    onApply: PropTypes.func.isRequired,
};
