import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import { t } from 'Framework/i18n';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import Icon from '@material-ui/core/Icon';
import PropTypes from 'prop-types';

const styles = theme => ({
    closeEditor: {
        fontSize: 15,
        fontWeight: 500,
        lineHeight: '18px',
        textTransform: 'none',
        pointerEvents: 'all', // catch the pointer events again
        borderRadius: '4px',
    },
    CloseEditorRoot: {
        marginBottom: 35,
        [theme.breakpoints.down('xs')]: {
            marginBottom: 16,
        },
    },
    closeEditorIconRoot: {
        height: 24,
        width: 24,
        fontSize: '24px',
        lineHeight: '24px',
        textAlign: 'center',
        marginRight: 8,
    },
    closeEditorLabel: {
        color: theme.palette.primary.darkText,
        fontWeight: 'bold',
    },
});
class CloseDesignEditor extends React.Component {
    static propTypes = {
        classes: PropTypes.object,
        closeEditDesigner: PropTypes.func,
    };

    render() {
        const { classes, closeEditDesigner } = this.props;
        return (
            <Grid container className={classes.CloseEditorRoot} alignItems="center" justify="center">
                <Button
                    variant="text"
                    onClick={closeEditDesigner}
                    classes={{ root: classes.closeEditor }}
                    size="large"
                >
                    <Icon
                        classes={{
                            root: classes.closeEditorIconRoot,
                        }}
                    >
                        close
                    </Icon>
                    <span className={classes.closeEditorLabel}>{t('addVisualElement.closeEdit')}</span>
                </Button>
            </Grid>
        );
    }
}

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