import { useCallback } from 'react';

import MuiGlobalStyles from '@mui/material/GlobalStyles';
import { type Theme } from '@mui/material/styles';

import { type HuGlobalStylesProps } from './types';
import { getScrollbarStyles } from './utils';

const BASE_STYLES = {
  '*': {
    boxSizing: 'border-box',
    margin: 0,
    padding: 0,
  },
  html: {
    WebkitFontSmoothing: 'antialiased',
    MozOsxFontSmoothing: 'grayscale',
    height: '100%',
    width: '100%',
  },
  body: {
    height: '100%',
    width: '100%',
  },
  '#root': {
    height: '100%',
    width: '100%',
  },
} as const;

const GlobalStyles = ({ additionalStyles }: HuGlobalStylesProps) => {
  const getStyles = useCallback(
    (theme: Theme) => {
      const extra =
        typeof additionalStyles === 'function'
          ? additionalStyles(theme)
          : additionalStyles;

      return [
        BASE_STYLES,
        getScrollbarStyles(theme),
        ...(extra ? [extra] : []),
      ];
    },
    [additionalStyles],
  );

  return <MuiGlobalStyles styles={getStyles} />;
};

export type { HuGlobalStylesProps };

export default GlobalStyles;