import * as React from 'react';
import { throttle } from 'core/utils';

const defaultWidth = 984;
const mediumWidth = 800;
const breakPoint = 1250;

export const withResize = Component => props => {
  const pageSize = window.innerWidth > breakPoint ? defaultWidth : mediumWidth;
  const [width, setChartWidth] = React.useState(pageSize);

  React.useEffect(() => {
    window.addEventListener('resize', updateWidth);
    return () => {
      window.removeEventListener('resize', updateWidth);
    };
  });

  const updateWidth = throttle(() => {
    window.innerWidth <= breakPoint ? setChartWidth(mediumWidth) : setChartWidth(defaultWidth);
  });

  return <Component width={width} {...props} />;
};