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 { Donut } from '.';
import type { DonutProps } from '.';

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

afterEach(cleanup);

const title = '7/10';
const subtitle = 'variants';
const tooltip = true;
const size = 'large';
const half = true;
const postfix = '%';

const donutTest: DonutProps = {
  data: [
    {
      name: 'One',
      value: 23,
      color: '#4DC9F6'
    },
    {
      name: 'Two',
      value: 7,
      color: '#FBDF9C'
    },
    {
      name: 'Four',
      value: 12
    }
  ]
};

describe('<Donut />', () => {
  it(`Should render successfully`, () => {
    const { baseElement } = render(
      <ThemeProvider>
        <Donut />
      </ThemeProvider>
    );
    expect(baseElement).toBeTruthy();
  });

  it(`Should render half donut with tooltip`, () => {
    const { baseElement } = render(
      <ThemeProvider>
        <Donut
          data={[
            {
              name: 'One',
              value: 46,
              color: '#266FE2'
            },
            {
              name: 'Empty',
              value: 4
            }
          ]}
          title="46/50"
          size={size}
          half={true}
          tooltip={true}
        />
      </ThemeProvider>
    );
    expect(baseElement).toBeTruthy();
  });

  it(`Should render xsmall donut with 2 entries`, () => {
    const { baseElement } = render(
      <ThemeProvider>
        <Donut
          data={[
            {
              name: 'One',
              value: 46,
              color: '#266FE2'
            },
            {
              name: 'Empty',
              value: 1
            }
          ]}
          title="46/47"
          size="xsmall"
        />
      </ThemeProvider>
    );
    expect(baseElement).toBeTruthy();
  });

  it(`Should render Donut with all data`, () => {
    const { queryByText } = render(
      <ThemeProvider>
        <Donut
          data={donutTest.data}
          title={title}
          subtitle={subtitle}
          tooltip={tooltip}
          tooltipPostfix={postfix}
        />
      </ThemeProvider>
    );
    let elm = queryByText(title);
    expect(elm?.innerHTML).toBe(title);
    elm = queryByText(subtitle);
    expect(elm?.innerHTML).toBe(subtitle);
  });

  it(`Should not render Donut title and subtitle`, () => {
    const { queryByText } = render(
      <ThemeProvider>
        <Donut data={donutTest.data} size={size} half={half} />
      </ThemeProvider>
    );
    let elm = queryByText(title);
    expect(elm?.innerHTML).toBeUndefined();
    elm = queryByText(subtitle);
    expect(elm?.innerHTML).toBeUndefined();
  });
});