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

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

afterEach(cleanup);

const lineExample = {
  lineChartTest: [
    { 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 }
  ],
  lineChartConfig: [
    {
      name: 'Chat123',
      id: 'chat',
      show: true,
      color: '#4DC9F6'
    },
    {
      name: 'Ticket234',
      id: 'ticket',
      show: true,
      color: '#E49307'
    }
  ],
  lineHeight: 350,
  domainMax: 10,
  domainCalc: true,
  tickCountY: 5,
  dots: true,
  tooltip: true,
  dataKeyX: 'date',
  dataXFormat: 'month',
  dataYFormat: 'percent'
};

it(`Should not render CustomTooltip`, () => {
  const { container } = render(
    <StyledEngineProvider injectFirst>
      <ThemeProvider>
        <ChartLine
          data={lineExample.lineChartTest}
          chartConfig={lineExample.lineChartConfig}
          height={lineExample.lineHeight}
          domainMax={lineExample.domainMax}
          dots={lineExample.dots}
          tooltip={lineExample.tooltip}
          domainCalc={lineExample.domainCalc}
          tickCountY={lineExample.tickCountY}
          dataKeyX={lineExample.dataKeyX}
          dataXFormat={lineExample.dataXFormat}
          dataYFormat={lineExample.dataYFormat}
        />
      </ThemeProvider>
    </StyledEngineProvider>
  );
  expect(container.firstChild).not.toBeNull();
});
