import { forwardRef } from 'react';
import type { ScrollBarProps as PerfectScrollbarProps } from 'react-perfect-scrollbar';
import PerfectScrollbar from 'react-perfect-scrollbar';

import Box from '@material-hu/mui/Box';

export type ScrollbarProps = PerfectScrollbarProps & {};

const Scrollbar = forwardRef<
  HTMLDivElement,
  React.PropsWithChildren<ScrollbarProps>
>(function ScrollbarComponent(props, ref) {
  const { children, ...other } = props;

  const isMobile =
    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
      navigator.userAgent,
    );

  if (isMobile) {
    return (
      <Box
        ref={ref}
        sx={{ overflowX: 'auto' }}
      >
        {children}
      </Box>
    );
  }

  return (
    <PerfectScrollbar
      // @ts-ignore
      ref={ref}
      {...other}
    >
      {children}
    </PerfectScrollbar>
  );
});

export default Scrollbar;