/* eslint-disable prettier/prettier */
import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import { t } from 'Framework/i18n';
import withWidth from '@material-ui/core/withWidth';
import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import FormHelperText from '@material-ui/core/FormHelperText';
import PropTypes from 'prop-types';

const styles = theme => ({
    MuiFormControlRoot: {
        display: 'flex !important',
        [theme.breakpoints.up('sm')]: {
            marginTop: 15,
            marginBottom: 20,
        },
        '& label': {
            fontSize: 15,
        },
    },
    checkboxLabel: {
        fontSize: 15,
        paddingTop: 10,
        paddingLeft: 11,
        paddingBottom: 20,
        [theme.breakpoints.down('xs')]: {
            paddingLeft: 2,
        },
        alignItems: 'start',    
    },
    checkbox: {
        marginRight: '10px',
        [theme.breakpoints.down('xs')]: {
            margin: '-12px 0 0 10px',
        },
        padding: '0',
    },
    formHelperText: {
        marginLeft: 45,
        marginBottom: 15,
    },
});

class AcceptDesign extends React.Component {
    static propTypes = {
        classes: PropTypes.object,
        noteLabel: PropTypes.string,
        notice: PropTypes.string,
        handleChange: PropTypes.func,
        width: PropTypes.string,
        handleChangeCheckboxApproval: PropTypes.func,
        approval: PropTypes.object,
        displayAcceptDesign: PropTypes.bool,
        termsAndConditionsLink: PropTypes.string,
    };
    render() {
        const {
            classes,
            noteLabel,
            notice,
            handleChange,
            handleChangeCheckboxApproval,
            approval,
            displayAcceptDesign,
            termsAndConditionsLink,
        } = this.props;

        const termsLink = `<a href="${termsAndConditionsLink}"
                              target="_blank">${t('acceptDesignScreen.termsAndConditionsLinkLabel')}</a>`;
        const termsAndConditions = termsAndConditionsLink
            ? ' ' + t('acceptDesignScreen.termsAndConditions', { termsAndConditionsLink: termsLink })
            : '';

        return (
            <Grid container>
                <Grid item xs={12}>
                    <TextField
                        label={noteLabel}
                        multiline
                        rows="3"
                        rowsMax="3"
                        value={notice}
                        onChange={handleChange}
                        margin="normal"
                        variant="outlined"
                        translate="no"
                        classes={{
                            root: classes.MuiFormControlRoot,
                        }}
                    />
                </Grid>
                {displayAcceptDesign && (
                    <Grid item xs={12}>
                        <FormControlLabel
                            className={classes.checkboxLabel}
                            control={
                                <Checkbox
                                    name="approval"
                                    checked={approval.value}
                                    onChange={handleChangeCheckboxApproval}
                                    color="primary"
                                    className={classes.checkbox}
                                />
                            }
                            label={
                                <span
                                    dangerouslySetInnerHTML={{
                                        __html:
                                            t('acceptDesignScreen.checkedSelectionActive') +
                                            termsAndConditions,
                                    }}
                                />
                            }
                        />
                        {approval.error && (
                            <FormHelperText error={true} className={classes.formHelperText}>
                                {t('acceptDesignScreen.selectionError')}
                            </FormHelperText>
                        )}
                    </Grid>
                )}
            </Grid>
        );
    }
}

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