import React from 'react';
import { cleanup, screen } from '@testing-library/react';
import { render } from '../../theme-render-wrapper';
import type { Theme } from '../../../components/@styles/theme-provider';

import ChartTooltip from './ChartTooltip';
import type { TooltipFormatterType } from './ChartTooltip';

import { textToDate } from '../formatters/formatters';

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

afterEach(cleanup);

const payload = [
  {
    color: '#E49307',
    name: 'ticket',
    value: 6
  },
  {
    color: '#4DC9F6',
    name: 'chat',
    value: 5
  }
];

const config = [
  {
    name: 'Chat123',
    id: 'chat',
    show: true,
    color: '#4DC9F6'
  },
  {
    name: 'Ticket234',
    id: 'ticket',
    show: true,
    color: '#E49307'
  }
];

const activeFalse = false;
const activeTrue = true;
const labelTest = '2021-01-01';
const format = 'date';
const dataXFormat = 'month';
const dataYFormat = 'percent';
const tooltipFormatter: TooltipFormatterType = (item, index) => {
  const color = index > 0 ? 'green' : 'red';
  const value = `$${item.value} USD`;
  return { ...item, color, value };
};

const formattedLabel = (text: string) => {
  if (format === 'date') {
    return textToDate(text, {
      month: 'short',
      year: 'numeric'
    });
  }
  return text;
};

describe('<ChartTooltip />', () => {
  it(`Should render CustomTooltip with all data`, () => {
    const { queryByText } = render(
      <ChartTooltip
        payload={payload}
        active={activeTrue}
        label={labelTest}
        format={format}
        dataXFormat={dataXFormat}
        config={config}
      />
    );
    let elm = queryByText(formattedLabel(labelTest));
    expect(elm?.innerHTML).toBe(formattedLabel(labelTest));
    elm = queryByText(`${config[0].name}:`);
    expect(elm?.innerHTML).toBe(`${config[0].name}:`);
    elm = queryByText(payload[0].value);
    expect(elm?.innerHTML).toBe(payload[0].value.toString());
  });

  it(`Should render CustomTooltip with postfix`, () => {
    render(
      <ChartTooltip
        payload={payload}
        active={activeTrue}
        label={labelTest}
        config={config}
        valuePostfix="%"
      />
    );
    const firstValue = payload[0].value;
    const postfix = screen.queryByText(`${firstValue}%`);
    expect(postfix).toBeTruthy();
  });

  it(`Should render CustomTooltip without payload`, () => {
    const { queryByTestId } = render(
      <ChartTooltip
        active={activeTrue}
        label={labelTest}
        format={format}
        dataXFormat={dataXFormat}
        config={config}
      />
    );
    // label
    let elm = queryByTestId('label');
    expect(elm?.innerHTML).toBe(formattedLabel(labelTest));
    // name
    elm = queryByTestId('name-0');
    expect(elm).toBeNull(); // shouldn't exist
    // values
    elm = queryByTestId('value-0');
    expect(elm).toBeNull(); // shouldn't exist
  });

  it(`Should render CustomTooltip without formatting`, () => {
    const { queryByTestId } = render(
      <ChartTooltip payload={payload} active={activeTrue} label={labelTest} config={config} />
    );
    // label
    let elm = queryByTestId('label');
    expect(elm?.innerHTML).toBe(labelTest);
    // name
    elm = queryByTestId('name-0');
    expect(elm?.innerHTML).toBe(`${config[0].name}:`);
    // values
    elm = queryByTestId('value-0');
    expect(elm?.innerHTML).toBe(payload[1].value.toString());
  });

  it(`Should render CustomTooltip without label and formatting`, () => {
    const { queryByTestId } = render(
      <ChartTooltip payload={payload} active={activeTrue} config={config} />
    );
    // label
    let elm = queryByTestId('label');
    expect(elm?.innerHTML).toBe('');
    // name
    elm = queryByTestId('name-0');
    expect(elm?.innerHTML).toBe(`${config[0].name}:`);
    // values
    elm = queryByTestId('value-0');
    expect(elm?.innerHTML).toBe(payload[1].value.toString());
  });

  it(`Should render CustomTooltip with percentages`, () => {
    const { queryByText } = render(
      <ChartTooltip
        payload={payload}
        active={activeTrue}
        label={labelTest}
        format={format}
        dataXFormat={dataXFormat}
        dataYFormat={dataYFormat}
        config={config}
      />
    );
    let elm = queryByText(formattedLabel(labelTest));
    expect(elm?.innerHTML).toBe(formattedLabel(labelTest));
    elm = queryByText(`${config[1].name}:`);
    expect(elm?.innerHTML).toBe(`${config[1].name}:`);
    elm = queryByText(`${payload[1].value}%`);
    expect(elm?.innerHTML).toBe(`${payload[1].value}%`);
  });

  it(`Should render CustomTooltip with formatted values`, () => {
    const { queryByTestId } = render(
      <ChartTooltip
        payload={payload}
        active={activeTrue}
        label={labelTest}
        format={format}
        dataXFormat={dataXFormat}
        tooltipFormatter={tooltipFormatter}
        config={config}
      />
    );
    // label
    let elm = queryByTestId('label');
    expect(elm?.innerHTML).toBe(formattedLabel(labelTest));
    // names
    elm = queryByTestId('name-0');
    expect(elm?.innerHTML).toBe(`${config[0].name}:`);
    elm = queryByTestId('name-1');
    expect(elm?.innerHTML).toBe(`${config[1].name}:`);
    // values
    elm = queryByTestId('value-0');
    expect(elm?.innerHTML).toBe(`$${payload[1].value} USD`);
    elm = queryByTestId('value-1');
    expect(elm?.innerHTML).toBe(`$${payload[0].value} USD`);
  });

  it(`Should render CustomTooltip with formatted squares`, () => {
    let elm, style;
    const { queryByTestId } = render(
      <ChartTooltip
        payload={payload}
        active={activeTrue}
        label={labelTest}
        format={format}
        dataXFormat={dataXFormat}
        tooltipFormatter={tooltipFormatter}
        config={config}
      />
    );
    // label
    elm = queryByTestId('label');
    expect(elm?.innerHTML).toBe(formattedLabel(labelTest));
    // squares
    elm = queryByTestId('square-0');
    style = elm ? getComputedStyle(elm) : { backgroundColor: '' };
    expect(style.backgroundColor).toBe('red');
    elm = queryByTestId('square-1');
    style = elm ? getComputedStyle(elm) : { backgroundColor: '' };
    expect(style.backgroundColor).toBe('green');
  });

  it(`Should not render CustomTooltip`, () => {
    const { container } = render(<ChartTooltip payload={payload} active={activeFalse} />);
    expect(container.firstChild).toBeNull();
  });
});