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

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

// Mock charts data
const chartConfig = [
  {
    name: 'chat',
    id: 'chat123',
    show: true,
    color: '#4DC9F6',
    type: 'area'
  },
  {
    name: 'ticket',
    id: 'ticket234',
    show: true,
    color: '#E49307',
    type: 'area'
  },
  {
    name: 'number',
    id: 'number345',
    show: false,
    type: 'line'
  },
  {
    name: 'user',
    id: 'user456',
    show: true,
    type: 'bar',
    yAxisSecond: true,
    invisible: true
  }
];

const donutData = [
  {
    name: 'One',
    value: 23,
    color: '#4DC9F6'
  },
  {
    name: 'Two',
    value: 7,
    color: '#FBDF9C'
  },
  {
    name: 'Three',
    value: 12
  }
];

const postfix = '%';
const prefix = '$';

const clickHandler = jest.fn();

afterEach(cleanup);

describe('<Legend />', () => {
  it(`Should render Legend with a all data active`, () => {
    const { getByText, queryByText } = render(
      <StyledEngineProvider injectFirst>
        <ThemeProvider>
          <ChartLegend chartConfig={chartConfig} active handleChange={clickHandler} />
        </ThemeProvider>
      </StyledEngineProvider>
    );
    const buttonEl = getByText(chartConfig[0].name);
    buttonEl.click();
    expect(clickHandler).toHaveBeenCalled();

    const elm = queryByText(chartConfig[0].name);
    expect(elm?.innerHTML).toBe(chartConfig[0].name);

    const invisible = queryByText(chartConfig[3].name);
    expect(invisible).toBeNull();
  });

  it(`Should render Legend with a all data not active`, () => {
    const { queryByText } = render(
      <StyledEngineProvider injectFirst>
        <ThemeProvider>
          <ChartLegend chartConfig={chartConfig} />
        </ThemeProvider>
      </StyledEngineProvider>
    );
    const elm = queryByText(chartConfig[0].name);
    expect(elm?.innerHTML).toBe(chartConfig[0].name);
  });

  it(`Should render Legend vertical vs postfix for donut`, () => {
    const { queryByText } = render(
      <StyledEngineProvider injectFirst>
        <ThemeProvider>
          <ChartLegend vertical data={donutData} legendUnitPostfix={postfix} />
        </ThemeProvider>
      </StyledEngineProvider>
    );
    let elm = queryByText(donutData[0].name);
    expect(elm?.innerHTML).toBe(donutData[0].name);
    elm = queryByText(`${donutData[0].value}${postfix}`);
    expect(elm?.innerHTML).toBe(`${donutData[0].value}${postfix}`);
  });

  it(`Should render Legend vertical with formatted values`, () => {
    const formatter = (value: number) => value.toFixed(2);
    const { queryByText } = render(
      <StyledEngineProvider injectFirst>
        <ThemeProvider>
          <ChartLegend vertical data={donutData} formatter={formatter} />
        </ThemeProvider>
      </StyledEngineProvider>
    );
    let elm = queryByText(donutData[0].name);
    expect(elm?.innerHTML).toBe(donutData[0].name);
    elm = queryByText(formatter(donutData[0].value));
    expect(elm?.innerHTML).toBe(formatter(donutData[0].value));
  });

  it(`Should render Legend vertical vs prefix for donut`, () => {
    const { queryByText } = render(
      <StyledEngineProvider injectFirst>
        <ThemeProvider>
          <ChartLegend vertical data={donutData} legendUnitPrefix={prefix} />
        </ThemeProvider>
      </StyledEngineProvider>
    );
    let elm = queryByText(donutData[2].name);
    expect(elm?.innerHTML).toBe(donutData[2].name);
    elm = queryByText(`${prefix}${donutData[0].value}`);
    expect(elm?.innerHTML).toBe(`${prefix}${donutData[0].value}`);
  });

  it(`Should render Legend vertical active`, () => {
    const { getByText, queryByText } = render(
      <StyledEngineProvider injectFirst>
        <ThemeProvider>
          <ChartLegend chartConfig={chartConfig} active handleChange={clickHandler} vertical />
        </ThemeProvider>
      </StyledEngineProvider>
    );
    const buttonEl = getByText(chartConfig[0].name);
    buttonEl.click();
    expect(clickHandler).toHaveBeenCalled();

    const elm = queryByText(chartConfig[0].name);
    expect(elm?.innerHTML).toBe(chartConfig[0].name);

    const invisible = queryByText(chartConfig[3].name);
    expect(invisible).toBeNull();
  });

  it(`Should render Legend with a all data not active vertical`, () => {
    const { queryByText } = render(
      <StyledEngineProvider injectFirst>
        <ThemeProvider>
          <ChartLegend chartConfig={chartConfig} vertical />
        </ThemeProvider>
      </StyledEngineProvider>
    );
    const elm = queryByText(chartConfig[0].name);
    expect(elm?.innerHTML).toBe(chartConfig[0].name);
  });
});