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

const AccessibleButtonBase = ({ notAccessible, ...props }) => (
    <ButtonBase tabIndex={notAccessible ? -1 : 0} focusRipple disableTouchRipple {...props} />
);

AccessibleButtonBase.propTypes = {
    notAccessible: PropTypes.bool,
};

AccessibleButtonBase.defaultProps = {
    notAccessible: false,
};

export default withStyles(
    () => ({
        root: {
            justifyContent: 'left',
            textAlign: 'left',
            '& .MuiTouchRipple-root .MuiTouchRipple-child': {
                borderRadius: '8px',
            },
        },
    }),
    { name: 'AccessibleButton' }
)(AccessibleButtonBase);
