import { useReducer } from 'react';
import debounce from 'lodash/debounce';

function windowSizeReducer(state, action) {
  if (action.type === 'resize') {
    return action.width;
  }
  return state;
}

function useWindowSize() {
  const [width, dispatch] = useReducer(windowSizeReducer, window.innerWidth);
  
  useEffect(
    () => {
      function handleResize() {
        dispatch({ type: 'resize', width: window.innerWidth });
      }
      
      const lazilyHandleResize = debounce(handleResize, 100);
      
      window.addEventListener('resize', lazilyHandleResize);
      
      return function detachResizeHandler() {
        window.removeEventListener('resize', lazilyHandleResize);
      };
    },
    [dispatch],
  );
  
  return width;
}