import { cleanup } from '@testing-library/react';
import { render } from '../../../utils/theme-render-wrapper';

import { ToggleButton } from '../toggle-button';
import { ToggleButtonGroup } from './index';
import type { ToggleButtonGroupProps } from './index';

const changeFn = jest.fn();

afterEach(() => {
  changeFn.mockClear();
  cleanup();
});

const Wrapper = (props: Omit<ToggleButtonGroupProps, 'children'>) => (
  <ToggleButtonGroup {...props}>
    <ToggleButton value="on">Enable</ToggleButton>
    <ToggleButton value="off">Disable</ToggleButton>
  </ToggleButtonGroup>
);

describe('<ToggleButtonGroup />', () => {
  it('should render successfully', () => {
    const { queryByRole } = render(<ToggleButtonGroup children={[]} />);
    expect(queryByRole('group')).toBeTruthy();
  });

  it('should render exclusive group and click once', () => {
    const { queryAllByTestId } = render(<Wrapper onChange={changeFn} value="on" />);
    queryAllByTestId('toggleButton')[0]?.click();
    expect(changeFn).toHaveBeenCalledTimes(1);
  });

  it('should render multiple group and click once', () => {
    const { queryAllByTestId } = render(<Wrapper multiple onChange={changeFn} value="on" />);
    queryAllByTestId('toggleButton')[0]?.click();
    expect(changeFn).toHaveBeenCalledTimes(1);
  });

  it('should render multiple group and click twice', () => {
    const { queryAllByTestId } = render(<Wrapper multiple onChange={changeFn} />);
    queryAllByTestId('toggleButton')[0]?.click();
    queryAllByTestId('toggleButton')[0]?.click();
    expect(changeFn).toHaveBeenCalledTimes(2);
  });

  it('should render disabled group and prevent click', () => {
    const { queryAllByTestId } = render(<Wrapper disabled onChange={changeFn} />);
    queryAllByTestId('toggleButton')[0]?.click();
    expect(changeFn).not.toHaveBeenCalled();
  });
});