import React, { Ref } from "react";
import classNames from "classnames";
import { Box, BoxProps } from "../Box";
import { bem } from "../../utilities/bem";

const cn = "ScrollPane";

interface ScrollPaneProps extends BoxProps {
  /**
   * Disables scrolling in the container.
   */
  disabled?: boolean;
  /**
   * A react ref for the inner scrollable container. Use if you want to
   * programmatically scroll the pane.
   */
  scrollableContainerRef?: Ref<HTMLDivElement>;
  /**
   * mac OS hides scrollbars by default. Set this to true to always show them
   * via CSS, but it only works on webkit browsers.
   */
  scrollbarVisible?: boolean;
}

export const ScrollPane = (props: ScrollPaneProps) => {
  const {
    children,
    disabled,
    className,
    scrollableContainerRef,
    scrollbarVisible,
    ...rest
  } = props;

  return (
    <Box
      {...rest}
      className={classNames(bem(cn), disabled && "is-disabled", className)}
    >
      <Box
        ref={scrollableContainerRef}
        className={classNames([
          bem(cn, { e: "container" }),
          !disabled && scrollbarVisible && "visible-scrollbar",
        ])}
      >
        {children}
      </Box>
    </Box>
  );
};