// this hook allows content inside a Container to be scrolled from outside the Container
import { useEffect, useState } from 'react';

import { useDebounce } from '@material-hu/hooks/useDebounce';
import { type Breakpoint } from '@material-hu/mui';
import { useTheme } from '@material-hu/mui/styles';

export const useScrollableSX = (columnWidth: Breakpoint | number) => {
  const maxWidth = useTheme().breakpoints.values[columnWidth] || columnWidth;

  const [dashboardWidth, setDashboardWidth] = useState(0);
  useEffect(() => {
    function handleResize() {
      const dashboardLayoutElement = document.getElementById(
        'dashboard-layout-content',
      );
      setDashboardWidth(dashboardLayoutElement.clientWidth);
    }

    window.addEventListener('resize', handleResize);
    handleResize();
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const difference = useDebounce(dashboardWidth - maxWidth, 1000);

  if (difference <= 0) {
    return {};
  }

  return {
    mx: `calc(-${difference}px/2)`,
    px: `calc(${difference}px/2)`,
  };
};