import { createContext, RefObject, useContext } from 'react';
import { usePageScrollContext } from '@wix/design-system';

interface ScrollableContentContextValue {
  scrollableContentRef: RefObject<HTMLElement | null | undefined>;
}

export const ScrollableContentContext =
  createContext<ScrollableContentContextValue | null>(null);

export function useScrollableContentContext() {
  const value = useContext(ScrollableContentContext);
  const pageScrollContext = usePageScrollContext();

  if (value != null) {
    return value;
  }

  return pageScrollContext;
}