import { __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { styled } from '@mui/material/styles';
import classNames from 'classnames';
import { Scrollbars } from 'react-custom-scrollbars-2';
import { AUTO_HIDE, AUTO_HIDE_TIMEOUT } from '../../constants/ScrollContainer';
const PREFIX = 'SCScrollContainer';
const classes = {
    root: `${PREFIX}-root`
};
const Root = styled(Scrollbars, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (props, styles) => [styles.root]
})(() => ({
    position: 'relative',
    height: '100%',
    '&:hover': {
        '& div:last-child': {
            opacity: '1 !important'
        }
    }
}));
export default function ScrollContainer(props) {
    // PROPS
    const { children, className = {}, autoHide = AUTO_HIDE, autoHideTimeout = AUTO_HIDE_TIMEOUT } = props, rest = __rest(props, ["children", "className", "autoHide", "autoHideTimeout"]);
    /**
     * Example of custom styles for vertical thumb
     * Add to the root of this component:
     *  renderThumbVertical={renderThumbVertical}
     * and implement renderThumbVertical:
     *  function renderThumbVertical() {
     *    return <div style={{width: 20, backgroundColor: '#2e9696'}}></div>;
     *  }
     */
    return (_jsx(Root, Object.assign({ autoHideTimeout: autoHideTimeout, autoHide: autoHide, className: classNames(classes.root, className) }, rest, { children: children })));
}
