import React from 'react';
import PropTypes from 'prop-types';
import Portal from '@material-ui/core/Portal';
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
    root: {
        position: 'absolute',
        zIndex: 1,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        bottom: 48,
        left: 8,
        width: 'calc(100% - 388px)',
        [theme.orientation.portrait]: {
            bottom: 370,
            left: 0,
            width: '100%',
        },
    },
});

const StandardToolboxPortal = ({ classes, ...props }) => (
    <Portal>
        <div className={classes.root} {...props} />
    </Portal>
);

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

export const StyledStandardToolboxPortal = withStyles(styles, { name: 'StandardToolboxPortal' })(
    StandardToolboxPortal
);

export default StyledStandardToolboxPortal;
