import { ReactElement } from 'react';
import { renderHook } from '@testing-library/react-hooks';
import { cleanup } from '@testing-library/react';
import { ThemeProvider } from '../../../components/@styles/theme-provider';
import type { Theme } from '../../../components/@styles/theme-provider';
import { StyledEngineProvider } from '@mui/material/styles';
import { useTheme } from '@mui/material/styles';
import { useTick } from './useTick';

declare module '@mui/styles/defaultTheme' {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  interface DefaultTheme extends Theme {}
}

afterEach(cleanup);

test('should useEmpty send data', () => {
  const wrapper = ({ children }: { children: ReactElement }) => (
    <StyledEngineProvider injectFirst>
      <ThemeProvider>{children}</ThemeProvider>
    </StyledEngineProvider>
  );
  const { result } = renderHook(() => useTick(), { wrapper });
  const theme = renderHook(() => useTheme(), { wrapper }).result.current;

  const answer = {
    fontSize: theme.typography.caption1.fontSize,
    fill: theme.palette.primary[400],
    fontFamily: 'Inter'
  };
  expect(result.current).toEqual(answer);
});