import { Box } from '@mui/material';
import { alpha, styled } from '@mui/material/styles';
import { BrowserView, MobileView } from 'react-device-detect';
import { default as SimpleBarReact } from 'simplebar-react';
import 'simplebar/dist/simplebar.min.css';

const RootStyle = styled(BrowserView)({
  flexGrow: 1,
  height: '100%',
  overflow: 'hidden'
});

const SimpleBarStyle = styled(SimpleBarReact)(({ theme }) => ({
  maxHeight: '100%',
  '& .simplebar-scrollbar': {
    '&:before': {
      backgroundColor: alpha(theme.palette.grey[500], 0.48)
    },
    '&.simplebar-visible:before': {
      opacity: 1
    }
  },
  '& .simplebar-track.simplebar-vertical': {
    width: 10
  },
  '& .simplebar-track.simplebar-horizontal .simplebar-scrollbar': {
    height: 6
  },
  '& .simplebar-mask': {
    zIndex: 'inherit'
  }
}));
type SimpleBarProps = {
  children: React.ReactNode;
  sx?: object;
};
function SimpleBar({ children, sx, ...other }: SimpleBarProps) {
  return (
    <>
      <RootStyle>
        {/* @ts-ignore */}
        <SimpleBarStyle timeout={500} clickOnTrack={false} sx={sx} {...other}>
          {children}
        </SimpleBarStyle>
      </RootStyle>
      <MobileView>
        <Box sx={{ overflowX: 'auto', ...sx }} {...other}>
          {children}
        </Box>
      </MobileView>
    </>
  );
}

export { SimpleBar };