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 { ChartArea } from './chart-area';

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

afterEach(cleanup);

const areaExample = {
  areaChartTest: [
    { date: '2021-01-01', ticket: 6, chat: 5 },
    { date: '2021-02-01', ticket: 3, chat: 4 },
    { date: '2021-03-01', ticket: 4, chat: 4.7 },
    { date: '2021-04-01', chat: 4 },
    { date: '2021-05-01', chat: 4 },
    { date: '2021-06-01', ticket: 3.2, chat: 4.8 },
    { date: '2021-01-01', ticket: 6, chat: 5 },
    { date: '2021-02-01', ticket: 3, chat: 4 },
    { date: '2021-03-01', ticket: 4, chat: 4.7 },
    { date: '2021-04-01', ticket: 5, chat: 4 },
    { date: '2021-05-01', ticket: 7, chat: 4 },
    { date: '2021-06-01', ticket: 3.2, chat: 4.8 }
  ],
  areaChartConfig: [
    {
      name: 'Chat123',
      id: 'chat',
      show: true,
      color: '#4DC9F6'
    },
    {
      name: 'Ticket234',
      id: 'ticket',
      show: true,
      color: '#E49307'
    }
  ],
  areaHeight: 350,
  domainMax: 10,
  domainCalc: true,
  tickCountY: 5,
  dots: true,
  tooltip: true,
  dataKeyX: 'date',
  dataXFormat: 'month',
  dataYFormat: 'percent'
};

it(`Should render ChartArea`, () => {
  const { container } = render(
    <StyledEngineProvider injectFirst>
      <ThemeProvider>
        <ChartArea
          data={areaExample.areaChartTest}
          chartConfig={areaExample.areaChartConfig}
          height={areaExample.areaHeight}
          domainMax={areaExample.domainMax}
          dots={areaExample.dots}
          tooltip={areaExample.tooltip}
          domainCalc={areaExample.domainCalc}
          tickCountY={areaExample.tickCountY}
          dataKeyX={areaExample.dataKeyX}
          dataXFormat={areaExample.dataXFormat}
          dataYFormat={areaExample.dataYFormat}
        />
      </ThemeProvider>
    </StyledEngineProvider>
  );
  expect(container.firstChild).not.toBeNull();
});