import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import DialogContent from '@material-ui/core/DialogContent';
import DialogActions from '@material-ui/core/DialogActions';
import Typography from '@material-ui/core/Typography';
import TextField from '@material-ui/core/TextField';
import Error from '@material-ui/icons/Error';
import withWidth from '@material-ui/core/withWidth';
import { t } from 'Framework/i18n';
import MainButton from 'Shared/Components/MainButton';
import CustomDialog from 'Shared/Components/CustomDialog';
import AnalyticsWrapper from '../Analytics/AnalyticsWrapper';
import PropTypes from 'prop-types';

const styles = theme => ({
    dialogTitleRoot: {
        fontSize: '1.5rem',
        fontWeight: 400,
    },

    TypographyCaption: {
        fontSize: 12,
        lineHeight: 1.7,
    },
    errorResult: {
        background: '#ED1C29',
        color: '#fff',
        padding: '20px',
        borderRadius: '4px',
        fontSize: 16,
        lineHeight: 1.7,
        textAlign: 'center',
    },
    errorResultIcon: {
        float: 'left',
    },
    codeFieldWrapper: {
        display: 'flex',
        justifyContent: 'center',
        marginTop: 24,
        marginBottom: 32,
    },
    codeField: {
        borderRadius: 4,
        width: 200,
        height: 20,
        [theme.breakpoints.down('xs')]: {
            width: 370,
        },
    },
    codeFieldInput: {
        fontSize: '24px',
        lineHeight: '28px',
        marginTop: 8,
        marginBottom: 8,
        textAlign: 'center',
        height: 20,
        padding: '10px',
        fontWeight: 'bold',
        [theme.breakpoints.down('xs')]: {
            minWidth: 50,
        },
    },
    codeFieldLabel: {
        fontSize: '18px',
        fontWeight: 'bold',
        textAlign: 'center',
        marginLeft: 1,
        width: '99%',
        backgroundColor: '#fff',
        transform: 'translate(0px, 20px) scale(1)',
    },
    activeButton: {
        padding: '6px 15px',
        marginTop: 10,
    },
});

class LoadConfiguration extends React.Component {
    static propTypes = {
        onLoadClick: PropTypes.func,
        onClose: PropTypes.func,
        onCodeChange: PropTypes.func,
        loadCode: PropTypes.string,
        errorMessage: PropTypes.string,
        classes: PropTypes.object,
        workInProgress: PropTypes.bool,
        show: PropTypes.bool,
    };
    onChange = e => {
        this.props.onCodeChange(e.target.value);
    };

    render() {
        const { classes, workInProgress, onLoadClick, errorMessage, show, onClose, loadCode } = this.props;

        return (
            <CustomDialog
                open={show}
                onClose={onClose}
                dialogTitle={t('loadConfiguration.dialogTitle')}
                onCancel={onClose}
            >
                <DialogContent>
                    {workInProgress && (
                        <Typography
                            variant="body1"
                            classes={{ root: classes.TypographyCaption }}
                            id="alert-dialog-description"
                        >
                            {t('loadConfiguration.loadingInProgress')}
                        </Typography>
                    )}
                    {!workInProgress && (
                        <React.Fragment>
                            <Typography
                                variant="body1"
                                classes={{ root: classes.TypographyCaption }}
                                id="alert-dialog-description"
                            >
                                {t('loadConfiguration.enterCode')}
                            </Typography>
                            <div className={classes.codeFieldWrapper}>
                                <TextField
                                    className={classes.codeField}
                                    value={loadCode}
                                    variant={'outlined'}
                                    onChange={this.onChange}
                                    label={t('loadConfiguration.codeInputPlaceholder')}
                                    InputProps={{
                                        classes: {
                                            input: classes.codeFieldInput,
                                        },
                                        disableUnderline: true,
                                    }}
                                    InputLabelProps={{
                                        classes: {
                                            outlined: classes.codeFieldLabel,
                                        },
                                        disableUnderline: true,
                                    }}
                                />
                            </div>
                        </React.Fragment>
                    )}
                    {errorMessage && (
                        <div className={classes.errorResult}>
                            <Error className={classes.errorResultIcon} />
                            <Typography variant="body1">{t(errorMessage)}</Typography>
                        </div>
                    )}
                </DialogContent>
                <DialogActions>
                    <AnalyticsWrapper targetId="load_request" data={loadCode}>
                        <MainButton
                            onClick={onLoadClick}
                            variant="contained"
                            size="medium"
                            className={classes.activeButton}
                        >
                            {t('loadConfiguration.loadButton')}
                        </MainButton>
                    </AnalyticsWrapper>
                </DialogActions>
            </CustomDialog>
        );
    }
}

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