import * as React from 'react';
import { withResizeDetect, withResizeDetectWrapper } from './ResizeDetect';
import { withStyles } from '@material-ui/core/styles';

const styles = {
    test: {
        transition: 'all 0.3s',
        width: '20%',
        minWidth: 180,
        background: 'green',
        color: 'white',
        padding: '5%',
        height: 50,
        '&:hover': {
            width: '90%',
            height: 500,
        },
    },
};

const RenderPropVersion = withResizeDetect(
    withStyles(styles, { name: 'ResizeDetect' })(({ containerRef, size, classes }) => (
        <div className={classes.test} ref={containerRef}>
            Hover me to test! {size.width}x{size.height}
        </div>
    ))
);

const WrapperVersion = withResizeDetectWrapper(({ size }) => (
    <div>
        Hover me to test! {size.width}x{size.height}
    </div>
));

// eslint-disable-next-line no-unused-vars
const StyledWrapper = withStyles(styles)(({ classes }) => <WrapperVersion className={classes.test} />);

export default RenderPropVersion;
