import { forwardRef } from 'react';
import PropTypes from 'prop-types';
import CustomPropTypes from "../../../utils/prop-types/index.js";
import cx from "../../../utils/css/cx.js";
import ScrollArea from "../../structure/ScrollArea/index.js";
import useResponsiveValues from "../../../hooks/breakpoint/useResponsiveValues/index.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);

/**
 * A horinztally scrollable section that aligns the left edge of its content
 * with the grid. By default it will left-align with the well, but you can
 * specify an `offset` in order to offset it by some number of columns.
 */
const GridAlignedHorizontalScroll = forwardRef((props, ref) => {
  const {
    margin,
    offset,
    children
  } = props;
  const columnOffset = useResponsiveValues(offset);
  return <div style={{
    '--GridAlignedHorizontalScroll-col-offset': columnOffset
  }}>
      <ScrollArea ref={ref} className={cls('scroller')} margin={margin}>
        {children}
      </ScrollArea>
    </div>;
});
GridAlignedHorizontalScroll.displayName = 'GridAlignedHorizontalScroll';
GridAlignedHorizontalScroll.defaultProps = {
  margin: undefined,
  offset: undefined,
  children: undefined
};
GridAlignedHorizontalScroll.propTypes = {
  /**
   * The vertical margins around the element. Margins can be specified as one
   * spacing value that gets used on both top and bottom, an explicit `y`
   * value, or completely separate `tb` values. The values correspond to levels
   * of our spacing scale (e.g., `"4"` corresponds to `$spacing-4`). Note that
   * grid items do not support custom horizontal margins.
   */
  margin: CustomPropTypes.responsive(PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
    y: PropTypes.string
  }), PropTypes.shape({
    t: PropTypes.string,
    b: PropTypes.string
  })])),
  /**
   * A column offset for the left alignment on the grid
   */
  offset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /**
   * The content that should be rendered in the scroll area
   */
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
};
export default GridAlignedHorizontalScroll;