import uniqueId from 'lodash/uniqueId';
import { act, cleanup, fireEvent } from '@testing-library/react';
import { render } from '../../../utils/theme-render-wrapper';

import { ASSETS_URL } from '../../../consts/common';
import { gridCheckboxSelectionColDef, GridCustomColumnTypes } from '../column-types';
import {
  ActionButton,
  ActionButtonProps,
  BackToTop,
  LazyLoadingGridCell,
  SkeletonizedGridCell
} from '../components';
import { getGridCustomColumnTypeByField, getGridCustomColumnTypes } from '../index';
import type { GridRenderCellParams } from '../index';
import { getRenderCellParams } from './helpers';

beforeEach(cleanup);

const mockFunc = jest.fn();

const action: ActionButtonProps['action'] = {
  iconSrc: `${ASSETS_URL}/icons2/icon_view.svg`,
  tooltipText: 'View',
  value: 'view',
  onClick: value => mockFunc
};
const row: ActionButtonProps['row'] = {
  _id: uniqueId()
};

describe('Check DataGrid components', () => {
  describe('<ActionButton />', () => {
    it(`should render button without tooltip`, () => {
      jest.useFakeTimers();
      const { container, queryByRole } = render(
        <ActionButton row={row} action={{ ...action, tooltipText: undefined }} />
      );
      const buttonEl = container.querySelector('button');
      act(() => {
        buttonEl && fireEvent.mouseOver(buttonEl);
        jest.runAllTimers(); // because of `enterDelay`
      });
      expect(queryByRole('tooltip')).toBeFalsy();

      buttonEl?.click();
      expect(mockFunc).toBeCalled();
    });

    it(`should render button with tooltip`, () => {
      jest.useFakeTimers();
      const tooltipText = 'tooltip text';
      const { container, queryByText } = render(
        <ActionButton row={row} action={{ ...action, tooltipText }} />
      );
      expect(queryByText(tooltipText)).toBeFalsy();

      const buttonEl = container.querySelector('button');
      act(() => {
        buttonEl && fireEvent.mouseOver(buttonEl);
        jest.runAllTimers(); // because of `enterDelay`
      });
      expect(queryByText(tooltipText)).toBeTruthy();
    });
  });

  describe('<BackToTop />', () => {
    it(`should render successfully`, () => {
      global.scrollTo = jest.fn();
      const { queryByTestId } = render(<BackToTop onClick={mockFunc} scrollBehavior="auto" />);
      queryByTestId('backToTop')?.click();
      expect(mockFunc).toBeCalled();
    });
  });

  describe('<LazyLoadingGridCell />', () => {
    it(`should render successfully`, () => {
      const field = 'arr';
      const colType = getGridCustomColumnTypeByField(field);
      const colTypeDef = { ...getGridCustomColumnTypes()[colType], field };
      const row = { _id: 'test_uid', arr: 123 };
      const value = row['arr'];
      const renderCellParams = getRenderCellParams({
        colDef: { ...colTypeDef, field } as GridRenderCellParams['colDef'],
        colType,
        field,
        row,
        value
      });
      const { baseElement } = render(<LazyLoadingGridCell {...renderCellParams} />);
      expect(baseElement).toBeTruthy();
    });
  });

  describe('<SkeletonizedGridCell />', () => {
    it(`should render successfully`, () => {
      const colTypeDef = gridCheckboxSelectionColDef;
      const colType = colTypeDef.type as GridCustomColumnTypes;
      const field = colTypeDef.field;
      const row = { _id: 'test_uid' };
      const renderCellParams = getRenderCellParams({
        colDef: { ...colTypeDef, field } as GridRenderCellParams['colDef'],
        colType,
        field,
        row
      });
      const { baseElement } = render(<SkeletonizedGridCell {...renderCellParams} />);
      expect(baseElement).toBeTruthy();
    });
  });
});