import { Fragment } from 'react';
import { cleanup } from '@testing-library/react';
import { render } from '../../utils/theme-render-wrapper';
import { InfoList } from './info-list';
import type { InfoListProps } from './types';

afterEach(cleanup);

const title = 'title';
const onClose = jest.fn();
const onTabsChange = jest.fn();
const tabs = [{ label: 'Item One' }, { label: 'Item Two' }];
const handleListItemClick = jest.fn();
const handleStatusDotClick = jest.fn();
const tooltipTitle = 'tooltipTitle';
const activeTooltipTitle = 'activeTooltipTitle';
const tabsButtons = [
  {
    onClick: jest.fn(),
    'data-testid': 'button1',
    children: 'button1'
  },
  {
    onClick: jest.fn(),
    'data-testid': 'button2',
    children: 'button2'
  }
];
const listItems: InfoListProps['listItems'] = [
  {
    id: '1',
    title: 'item1',
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
    description: 'description',
    isActive: true,
    avatarProps: {
      src: 'https://upload.wikimedia.org/wikipedia/commons/8/8f/Cute-kittens-12929201-1600-1200.jpg'
    },
    statusTooltipProps: {
      title: activeTooltipTitle,
      placement: 'left'
    }
  },
  {
    id: '2',
    title: 'item2',
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.2',
    description: 'description2',
    isActive: false,
    avatarProps: {
      src: 'https://upload.wikimedia.org/wikipedia/commons/8/8f/Cute-kittens-12929201-1600-1200.jpg'
    },
    statusTooltipProps: {
      title: tooltipTitle
    }
  }
];

const defaultProps: InfoListProps = {
  title,
  onClose,
  tabsProps: {
    onChange: onTabsChange,
    value: 0
  },
  tabs,
  tabsButtons,
  handleListItemClick,
  handleStatusDotClick,
  listItems,
  infiniteScrollProps: {
    dataLength: 2,
    hasMore: false,
    loader: Fragment,
    next: jest.fn
  }
};

describe('<InfoList />', () => {
  it('should render title correctly', () => {
    const { queryByText } = render(<InfoList {...defaultProps} />);
    const el = queryByText(title);
    expect(el).toBeTruthy();
  });

  it('should click on close icon correctly', () => {
    const { queryByTestId } = render(<InfoList {...defaultProps} />);
    const el = queryByTestId('closeIcon');
    el?.click();
    expect(onClose).toHaveBeenCalled();
  });

  it('should handle tabs change', () => {
    const { queryByTestId } = render(<InfoList {...defaultProps} />);
    const index = Math.floor(Math.random() * tabs.length);
    const el = queryByTestId(`tab_${tabs.length - 1}`);
    el?.click();

    expect(onTabsChange).toHaveBeenCalled();
  });

  it('should click on tabs button successfully', () => {
    const { queryByTestId } = render(<InfoList {...defaultProps} />);
    const index = Math.floor(Math.random() * tabsButtons.length);
    const button = tabsButtons[index];
    const el = queryByTestId(button['data-testid']);
    el?.click();
    expect(button.onClick).toHaveBeenCalled();
  });

  it('should render and click list item correctly', () => {
    const { queryByTestId, queryByText } = render(<InfoList {...defaultProps} />);
    const index = Math.floor(Math.random() * listItems.length);
    const listItem = listItems[index];
    const { title, description, text } = listItem;

    let el = queryByText(title);
    expect(el).toBeTruthy();
    el = queryByTestId(`listItem_avatar_${index}`);
    expect(el).toBeTruthy();
    el = queryByText(text);
    expect(el).toBeTruthy();
    el = queryByText(description);
    expect(el).toBeTruthy();
  });

  it('should click on list item correctly', () => {
    const { queryByTestId } = render(<InfoList {...defaultProps} />);
    const index = listItems.findIndex(i => i.isActive);

    const el = queryByTestId(`listItem_${index}`);

    el?.click();
    expect(handleListItemClick).toHaveBeenCalledWith(listItems[index].id);
  });

  it('should click on list item status dot correctly', () => {
    const { queryByTestId } = render(<InfoList {...defaultProps} />);
    const index = listItems.findIndex(i => !i.isActive);

    const el = queryByTestId(`statusDot_${index}`);

    el?.click();
    expect(handleStatusDotClick).toHaveBeenCalledWith(listItems[index].id);
  });

  it('should display status dot tooltip correctly', () => {
    const { queryByTestId } = render(<InfoList {...defaultProps} />);
    const index = listItems.findIndex(i => !i.isActive);

    const el = queryByTestId(`statusDot_${index}`);

    el?.click();
    expect(handleStatusDotClick).toHaveBeenCalledWith(listItems[index].id);
  });
});