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 getMarginClasses from "../../../utils/css/getMarginClasses.js";
import useResponsiveValues from "../../../hooks/breakpoint/useResponsiveValues/index.js";
import * as RadixScrollArea from '@radix-ui/react-scroll-area';
import getColor from "../../../utils/colors/getColor.js";
import classes from './styles.module.scss';

/**
 * A scroll area rendered with `@radix-ui/react-scroll-area` to provide a more
 * minimal scroll UI than default browser implementations.
 */
const ScrollArea = forwardRef((props, ref) => {
  const {
    className,
    margin,
    scroll = 'xy',
    colorScale = 'gray',
    thumbColor = `${colorScale}-30`,
    barColor,
    children
  } = props;
  const scrollX = scroll.includes('x');
  const scrollY = scroll.includes('y');
  const marginValue = useResponsiveValues(margin);
  const margins = getMarginClasses(marginValue, {
    defaultSide: 'y',
    sides: ['y', 't', 'b']
  });
  return <div style={{
    '--ScrollArea-thumb-color': getColor(thumbColor),
    '--ScrollArea-bar-color': getColor(barColor)
  }}>
      <RadixScrollArea.Root>
        <RadixScrollArea.Viewport ref={ref} className={cx(className, margins)}>
          {children}
        </RadixScrollArea.Viewport>

        {scrollX && <RadixScrollArea.Scrollbar className={classes.bar} orientation="horizontal">
            <RadixScrollArea.Thumb className={classes.thumb} />
          </RadixScrollArea.Scrollbar>}

        {scrollY && <RadixScrollArea.Scrollbar className={classes.bar} orientation="vertical">
            <RadixScrollArea.Thumb className={classes.thumb} />
          </RadixScrollArea.Scrollbar>}

        {scrollX && scrollY && <RadixScrollArea.Corner />}
      </RadixScrollArea.Root>
    </div>;
});
ScrollArea.displayName = 'ScrollArea';
ScrollArea.defaultProps = {
  className: undefined,
  scroll: 'xy',
  margin: undefined,
  colorScale: 'gray',
  thumbColor: undefined,
  barColor: undefined,
  children: undefined
};
ScrollArea.propTypes = {
  /**
   * A custom classname to attach to the scroll container
   */
  className: PropTypes.string,
  /**
   * Which directions the content should scroll in
   */
  scroll: PropTypes.oneOf(['x', 'y', 'xy']),
  /**
   * 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
  })])),
  /**
   * The name of a color scale to use (e.g., `warmgray`)
   */
  colorScale: PropTypes.string,
  /**
   * A specific color for the thumb (defaults to the 30 stop of the provided
   * color scale).
   */
  thumbColor: PropTypes.string,
  /**
   * A specific color for the bar (defaults to transparent).
   */
  barColor: PropTypes.string,
  /**
   * The content that should be rendered in the scroll area
   */
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
};
export default ScrollArea;