import { ElementType, useContext } from 'react';
import { RtFrameProps } from '../rt-frame.types';
import { BreakpointConfigContext } from '@dpa/react-frame-context';
import { RtFrameStyled } from '../styled-components/rt-frame-styled';

export function useBreakpoint({
  breakpointXs,
  breakpointSm,
  breakpointMd,
  breakpointLg,
  isFontSizeProvider,
  as: renderAs,
}: RtFrameProps<ElementType>) {
  const hasNewBreakpoints =
    breakpointXs || breakpointSm || breakpointMd || breakpointLg;

  const { config: breakpointConfig, isRootAFontSizeProvider } = useContext(
    BreakpointConfigContext
  );

  const isStyledComponent = isRootAFontSizeProvider
    ? hasNewBreakpoints
    : hasNewBreakpoints || isFontSizeProvider;

  const Component: ElementType = isStyledComponent
    ? RtFrameStyled
    : renderAs || 'div';

  return {
    hasNewBreakpoints,
    breakpointConfig,
    isRootAFontSizeProvider,
    isStyledComponent,
    Component,
  };
}