import React from 'react';
import { cleanup, fireEvent } from '@testing-library/react';
import { render } from '../../../utils/theme-render-wrapper';
import type { Theme } from '../../@styles/theme-provider';
import { InfoCardWithBars } from './info-card-with-bars';
import type { InfoCardWithBarsProps } from './info-card-with-bars';
import activeSessionMockData from './__mocks__/mockInfoCardWithBars';

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

afterEach(cleanup);

const Wrapper = (props: InfoCardWithBarsProps) => <InfoCardWithBars {...props} />;

it(`Should render InfoCardWithBars`, () => {
  render(
    <Wrapper
      handleClick={jest.fn()}
      data={{
        chart: activeSessionMockData.chart,
        textual: activeSessionMockData.textual
      }}
    />
  );
});

it(`Should render title tooltip`, () => {
  const tooltipText = 'titleTooltipText';
  const chartTitle = 'title';
  const { findByTestId, getByText } = render(
    <Wrapper
      handleClick={jest.fn()}
      data={{
        chart: activeSessionMockData.chart,
        textual: activeSessionMockData.textual
      }}
      titleTooltipText={tooltipText}
      title={chartTitle}
    />
  );
  const titleEl = getByText(chartTitle);
  fireEvent.mouseEnter(titleEl);
  const toolTipElm = findByTestId('titleTooltip');
  expect(toolTipElm).toBeTruthy();
  fireEvent.mouseLeave(titleEl);
});

it(`Should render button tooltip`, () => {
  const tooltipText = 'buttonTooltipText';
  const buttonText = 'buttonText';
  const { queryByTestId, getByText } = render(
    <Wrapper
      handleClick={jest.fn()}
      data={{
        chart: activeSessionMockData.chart,
        textual: activeSessionMockData.textual
      }}
      buttonTooltipText={tooltipText}
      buttonText={buttonText}
    />
  );

  const buttonEl = getByText(buttonText);
  fireEvent.mouseEnter(buttonEl);

  const toolTipElm = queryByTestId('buttonTooltip');
  expect(toolTipElm).toBeTruthy();

  fireEvent.mouseLeave(buttonEl);
});

it(`Should render button as link`, () => {
  const onClick = jest.fn();
  const link = '/link/to/somewhere';
  const buttonText = 'buttonText';

  const { queryByTestId, getByText } = render(
    <Wrapper
      handleClick={onClick}
      data={{
        chart: activeSessionMockData.chart,
        textual: activeSessionMockData.textual
      }}
      buttonText={buttonText}
      href={link}
    />
  );

  const buttonEl = getByText(buttonText);
  const linkComponent = queryByTestId('topLinkComponent');
  fireEvent.click(buttonEl);
  expect(onClick).toBeCalledTimes(1);
  expect(linkComponent?.nodeName).toBe('A');
});