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

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

afterEach(cleanup);

const chartsExample = {
  data: [
    {
      date: '2021-01-01',
      ticket: 6,
      chat: 5,
      number: 3,
      user: 80,
      test: 5
    },
    { date: '2021-02-01', ticket: 3, chat: 4, number: 4, user: 35 },
    { date: '2021-03-01', ticket: 4, chat: 4.7, number: 5, user: 74 },
    { date: '2021-04-01', chat: 4, user: 59 },
    { date: '2021-05-01', chat: 4, user: 78 },
    { date: '2021-06-01', ticket: 3.2, chat: 4.8, user: 65 },
    { date: '2021-01-01', ticket: 6, chat: 5, user: 91 },
    { date: '2021-02-01', ticket: 3, chat: 4, user: 72 },
    { date: '2021-03-01', ticket: 4, chat: 4.7, user: 54 },
    { date: '2021-04-01', ticket: 5, chat: 4, user: 36 },
    { date: '2021-05-01', ticket: 7, chat: 4, user: 41 },
    {
      date: '2021-06-01',
      ticket: 3.2,
      chat: 4.8,
      number: 3,
      user: 62,
      test: 5
    }
  ],
  composedConfig: [
    {
      name: 'Chat123',
      id: 'chat',
      show: true,
      color: '#4DC9F6',
      type: 'area'
    },
    {
      name: 'Ticket234',
      id: 'ticket',
      show: true,
      color: '#E49307',
      type: 'area'
    },
    {
      name: 'Number345',
      id: 'number',
      show: true,
      type: 'line'
    },
    {
      name: 'User456',
      id: 'user',
      show: true,
      type: 'bar',
      yAxisSecond: true
    }
  ],
  height: 350,
  domainMax: 10,
  domainCalc: true,
  tickCountY: 5,
  dots: true,
  tooltip: true,
  dataKeyX: 'name',
  dataXFormat: 'month',
  dataYFormat: 'percent',
  isSecondYAxis: true,
  secondYAxisHide: true,
  secondYAxisDomainMax: 100,
  secondYAxisDomainCalc: true,
  referenceValue: 5,
  referenceTitle: 'Recommended Capacity',
  referenceWidth: 150,
  YAxisUnit: 'mb'
};

it(`Should render Composed chart with CustomTooltip`, () => {
  const { container } = render(
    <StyledEngineProvider injectFirst>
      <ThemeProvider>
        <ChartComposed
          data={chartsExample.data}
          chartConfig={chartsExample.composedConfig}
          height={chartsExample.height}
          domainMax={chartsExample.domainMax}
          tickCountY={chartsExample.tickCountY}
          tooltip={chartsExample.tooltip}
          dots={chartsExample.dots}
          dataKeyX={chartsExample.dataKeyX}
          dataXFormat={chartsExample.dataXFormat}
          dataYFormat={chartsExample.dataYFormat}
          isSecondYAxis={chartsExample.isSecondYAxis}
          secondYAxisHide={chartsExample.secondYAxisHide}
          secondYAxisDomainMax={chartsExample.secondYAxisDomainMax}
          secondYAxisDomainCalc={chartsExample.secondYAxisDomainCalc}
          referenceValue={chartsExample.referenceValue}
          referenceTitle={chartsExample.referenceTitle}
          referenceWidth={chartsExample.referenceWidth}
        />
      </ThemeProvider>
    </StyledEngineProvider>
  );
  expect(container.firstChild).not.toBeNull();
});