/* eslint-disable react/jsx-props-no-spreading */
import { ReactNode, forwardRef } from 'react';

import { useTestIdAttribute } from '../../hooks/useTestIdAttribute';
import { CommonProps } from '../../types';
import { assertEmptyObject } from '../../utils/assertEmptyObject';

import { StyledScrollbar } from './styled';

export interface ScrollableProps extends CommonProps {
  /** Scrollable content */
  children?: ReactNode;
}

/**
 * Custom scrollable area.
 *
 * ```tsx
 * import { Scrollable } from 'ui-kit';
 *
 * const StyledScrollable = styled(Scrollable)`
 *   height: 300px;
 * `;
 *
 * <StyledScrollable>
 *   <div>Some content</div>
 * </StyledScrollable>
 * ```
 */
export const Scrollable = forwardRef<HTMLDivElement, ScrollableProps>((props, ref) => {
  const { children, className, testId, ariaDescribedBy, ...rest } = props;
  assertEmptyObject(rest);

  const testIdAttribute = useTestIdAttribute();

  return (
    // Don't remove `...rest` because it contains div props
    <StyledScrollbar
      ref={ref}
      aria-describedby={ariaDescribedBy}
      className={className}
      {...rest}
      {...{ [testIdAttribute]: testId }}
    >
      {children}
    </StyledScrollbar>
  );
});