import React from 'react';
import { cleanup } from '@testing-library/react';
import { render } from '../../utils/theme-render-wrapper';
import { ThemeProvider } from '../@styles/theme-provider';
import type { Theme } from '../@styles/theme-provider';
import { StyledEngineProvider } from '@mui/material/styles';
import { ChartBar } from '.';

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

afterEach(cleanup);

const chartsExample = {
  height: 350,
  data: [
    {
      name: 'name1',
      value: 100
    },
    {
      name: 'name2',
      value: 200
    },
    {
      name: 'name3',
      value: 300
    },
    {
      name: 'name4',
      value: 400
    },
    {
      name: 'name5',
      value: 500
    }
  ]
};

it(`Should render ChartBarStacked`, () => {
  const { container } = render(
    <StyledEngineProvider injectFirst>
      <ThemeProvider>
        <ChartBar
          ResponsiveContainerProps={{
            height: chartsExample.height
          }}
          BarChartProps={{
            data: chartsExample.data
          }}
        />
      </ThemeProvider>
    </StyledEngineProvider>
  );
  expect(container.firstChild).not.toBeNull();
});