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 { ChartBarStacked } from '.';

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

afterEach(cleanup);

const chartsExample = {
  stackNoConf: {
    windows: [
      {
        appVersion: '1.0.0',
        count: 20,
        percentage: 50
      },
      {
        appVersion: '1.1.0',
        count: 10,
        percentage: 25
      },
      {
        appVersion: '2.0.0',
        count: 10,
        percentage: 25
      }
    ],
    mac: [
      {
        appVersion: '1.0.0',
        count: 20,
        percentage: 20
      },
      {
        appVersion: '1.1.0',
        count: 50,
        percentage: 50
      },
      {
        appVersion: '2.0.0',
        count: 30,
        percentage: 30
      }
    ],
    linux: [
      {
        appVersion: '1.0.0',
        count: 15,
        percentage: 15
      },
      {
        appVersion: '1.1.0',
        count: 35,
        percentage: 35
      },
      {
        appVersion: '2.0.1',
        count: 10,
        percentage: 10
      },
      {
        appVersion: '1.7.65',
        count: 39,
        percentage: 39
      },
      {
        appVersion: '1.7.3',
        count: 1,
        percentage: 1
      }
    ],
    ios: [
      {
        appVersion: '1.0.0',
        count: 7,
        percentage: 100
      }
    ],
    android: [
      {
        appVersion: '1.0.0',
        count: 3,
        percentage: 100
      }
    ]
  },
  height: 350,
  domainMax: 100,
  tickCountY: 5,
  tooltip: true,
  dataKeyX: 'name',
  dynamicNamedData: {
    dataName: 'appVersion',
    percentValue: 'percentage',
    value: 'count'
  },
  domainCalc: false
};

it(`Should render ChartBarStacked`, () => {
  const { container } = render(
    <StyledEngineProvider injectFirst>
      <ThemeProvider>
        <ChartBarStacked
          data={chartsExample.stackNoConf}
          height={chartsExample.height}
          domainMax={chartsExample.domainMax}
          tickCountY={chartsExample.tickCountY}
          tooltip={chartsExample.tooltip}
          dataKeyX={chartsExample.dataKeyX}
          dynamicNamedData={chartsExample.dynamicNamedData}
          domainCalc={chartsExample.domainCalc}
        />
      </ThemeProvider>
    </StyledEngineProvider>
  );
  expect(container.firstChild).not.toBeNull();
});