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>;
}

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

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