import React from 'react';
import { fireEvent, render } from '../../test-utils';
import '@testing-library/jest-dom';
import { SystemIcons, ToggleButton } from '../..';
import 'jest-styled-components';



describe('<ToggleButton />', () => {
  it('Renders ToggleButton component', async () => {
    const { container } = render(<ToggleButton id={'toggleBtn'} active={false} defaultState={{ icon: <SystemIcons.PlayList /> }} />);
    expect(container.querySelector('[id="toggleBtn"]')).toBeTruthy();
  });

  it('Renders ToggleButton component in active state', async () => {
    const { container } = render(<ToggleButton id={'toggleBtn'} active={true} defaultState={{ icon: <SystemIcons.PlayList /> }} />);
    expect(container.querySelector('[id="toggleBtn"]')).toBeTruthy();
    //check correct state class set
    expect(container.querySelector('[id="toggleBtn"]')!.closest('div')).toHaveClass('active');
  });

  it('Renders ToggleButton component in state-change', async () => {
    const { container } = render(
      <ToggleButton active={false} id={'toggleBtn'} activeState={{ icon: <SystemIcons.PlayList /> }} defaultState={{ icon: <SystemIcons.PlayList /> }} />,
    );
    expect(container.querySelector('[id="toggleBtn"]')).toBeTruthy();
    //check correct state class set
    expect(container.querySelector('[id="toggleBtn"]')!.closest('div')).toHaveClass('state-change');
  });

  it('Renders ToggleButton component in disabled state', async () => {
    const { container } = render(<ToggleButton disabled={true} id={'toggleBtn'} active={true} defaultState={{ icon: <SystemIcons.PlayList /> }} />);
    expect(container.querySelector('[id="toggleBtn"]')).toBeTruthy();
    //check correct state class set
    expect(container.querySelector('[id="toggleBtn"]')!.closest('div')).toHaveClass('disabled');
    //check inner button is disabled
    expect(container.querySelector('[id="toggleBtn"]') as HTMLButtonElement).toBeDisabled();
  });

  it('Check action for ToggleButton component', async () => {
    //mock action callback
    const handleChange = jest.fn();

    const { container } = render(
      <ToggleButton active={false} onChange={handleChange} id={'toggleBtn'} activeState={{ icon: <SystemIcons.PlayList /> }} defaultState={{ icon: <SystemIcons.PlayList /> }} />,
    );
    expect(container.querySelector('[id="toggleBtn"]')).toBeTruthy();
    fireEvent.click(container.querySelector('[id="toggleBtn"]') as HTMLButtonElement);

    //check callback  called
    expect(handleChange).toHaveBeenCalledTimes(1);
  });
});