import * as React from 'react';
import PropTypes from 'prop-types';
import { Services } from 'App/ServiceLocator';
import { withStyles } from '@material-ui/core/styles';

const styles = () => ({
    root: { position: 'absolute', height: '100%', width: '100%' },
});

export const DesignerClickAwayListener = ({ classes }) => (
    <div className={classes.root} onClick={() => Services.designData.clearDesignAreaSelection()} />
);

DesignerClickAwayListener.propTypes = {
    classes: PropTypes.object.isRequired,
};

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