import { cleanup } from '@testing-library/react';
import { render } from '../../utils/theme-render-wrapper';
import { ThemeProvider } from '../@styles/theme-provider';
import { ButtonsWithMenu } from './buttons-with-menu';
import type { ButtonsWithMenuProps } from './types';
import mockButtonsData from './__mocks__/mockButtonsWithMenu';

afterEach(cleanup);

const clickHandler = jest.fn();

const getVisibleContent = (countOfVisible: number) =>
  mockButtonsData
    .slice(0, countOfVisible)
    .map(item => item.name)
    .join('');

const Wrapper = (props: Partial<ButtonsWithMenuProps>) => (
  <ButtonsWithMenu
    listItems={mockButtonsData}
    clickHandler={clickHandler}
    onSortEnd={jest.fn()}
    handleDelete={jest.fn()}
    {...props}
  />
);

describe('<ButtonsWithMenu />', () => {
  it(`should render and click on 2 buttons`, () => {
    const countOfVisible = 2;
    const firstButtonContent = mockButtonsData[0].name;
    const { getByRole, getByTestId, getByText } = render(
      <Wrapper countOfVisible={countOfVisible} />
    );
    expect(getByRole('radiogroup')?.textContent).toBe(getVisibleContent(countOfVisible));
    const firstButtonEl = getByText(firstButtonContent);
    firstButtonEl.click();
    const dotsButtonEl = getByTestId('dotsButton');
    dotsButtonEl.click();
    expect(clickHandler).toHaveBeenCalled();
  });

  it(`should render and click button in dropdown`, () => {
    const fourthButtonContent = mockButtonsData[3].name;
    const { getByTestId, getByText } = render(<Wrapper />);
    const dotsButtonEl = getByTestId('dotsButton');
    dotsButtonEl.click();
    const fourthButtonEl = getByText(fourthButtonContent);
    fourthButtonEl.click();
    expect(clickHandler).toHaveBeenCalled();
  });

  it(`should render with 3 small buttons`, () => {
    const countOfVisible = 3;
    const { getByRole } = render(<Wrapper countOfVisible={countOfVisible} size="small" />);
    expect(getByRole('radiogroup')?.textContent).toBe(getVisibleContent(countOfVisible));
  });

  it(`should render with 3 large buttons`, () => {
    const countOfVisible = 3;
    const { getByRole } = render(<Wrapper countOfVisible={countOfVisible} size="large" />);
    expect(getByRole('radiogroup')?.textContent).toBe(getVisibleContent(countOfVisible));
  });
});