import { useEffect, useState } from 'react';
import { useWindowDimensions } from 'react-native';
import breakpoints from '@digigov/css/screens.json' with { type: 'json' };

export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
export const breakpointKeys: Breakpoints[] = Object.keys(
  breakpoints
) as Breakpoints[];
export const breakpointValues = Object.values(breakpoints) as number[];

function resolveScreenSize(width: number): Breakpoints {
  let breakpointIndex = 0;
  for (const breakpoint of breakpointValues) {
    if (width >= breakpoint && width < breakpointValues[breakpointIndex + 1]) {
      return breakpointKeys[breakpointIndex];
    }
    breakpointIndex++;
  }
  return 'xl';
}

export const useScreenSize = () => {
  const { width } = useWindowDimensions();
  const [screenSize, setScreenSize] = useState<Breakpoints>(
    resolveScreenSize(width)
  );

  useEffect(() => {
    setScreenSize(resolveScreenSize(width));
  }, [width]);

  return { screenSize, screenWidth: width };
};

export default useScreenSize;