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 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 => ({
    checkboxLabel: {
        fontSize: 15,
        paddingLeft: 11,
        paddingBottom: 12,
        [theme.breakpoints.down('xs')]: {
            paddingLeft: 12,
        },
    },
    checkbox: {
        alignSelf: 'flex-start',
        top: -10,
        paddingLeft: 0,
    },
    formHelperText: {
        marginLeft: 45,
        marginBottom: 15,
    },
});

class AcceptPrivacy extends React.Component {
    static propTypes = {
        classes: PropTypes.object,
        width: PropTypes.string,
        handleChangeCheckboxApproval: PropTypes.func,
        approval: PropTypes.object,
        dataPrivacyLink: PropTypes.string,
    };
    render() {
        const { classes, handleChangeCheckboxApproval, approval, dataPrivacyLink } = this.props;

        const privacyLink = `<a href="${dataPrivacyLink}"
                              target="_blank">${t('receiveOfferForm.privacyLinkLabel')}</a>`;
        const privacyNotice = t('receiveOfferForm.privacyNotice', { privacyLink });

        return (
            <Grid container>
                <Grid item xs={12}>
                    <FormControlLabel
                        className={classes.checkboxLabel}
                        control={
                            <Checkbox
                                className={classes.checkbox}
                                name="dataPrivacyAccepted"
                                checked={approval.value}
                                onChange={handleChangeCheckboxApproval}
                                color="primary"
                            />
                        }
                        label={
                            <span
                                dangerouslySetInnerHTML={{
                                    __html: privacyNotice,
                                }}
                            />
                        }
                    />
                    {approval.error && (
                        <FormHelperText error={true} className={classes.formHelperText}>
                            {t('receiveOfferForm.selectionError')}
                        </FormHelperText>
                    )}
                </Grid>
            </Grid>
        );
    }
}

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