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



describe('<ToggleSwitch />', () => {
  it('Renders ToggleSwitch component', async () => {
    const { getByText } = render(<ToggleSwitch label={'Test Switch label'} id="TogglerWithoutLabelNormal" onToggle={(val) => {}} selected={false} />);

    //check label element rendered
    expect(getByText('Test Switch label').closest('label')).toBeTruthy();
    //check label text
    expect(getByText('Test Switch label')).toBeTruthy();
    //no size defined, medium by default
    expect(getByText('Test Switch label').closest('div')).toHaveClass('medium');
  });

  it('Renders ToggleSwitch component without label', async () => {
    const { container } = render(<ToggleSwitch size={Size.Large} id="TogglerWithoutLabelNormal" onToggle={(val) => {}} selected={false} />);

    //check label element rendered
    expect(container.querySelector('.label')).toBeFalsy();
    //large size defined
    expect(container.querySelector('[id="switchContainer"]')!.closest('div')).toHaveClass('large');
    //should be able to focus the parent div as not disabeld
    expect(container.querySelector('[id="switchContainer"]')!.closest('div')).toHaveAttribute('tabindex', '0');
  });

  it('Renders disabled ToggleSwitch component', async () => {
    const { container } = render(<ToggleSwitch disabled={true} id="TogglerWithoutLabelNormal" onToggle={(val) => {}} selected={false} />);

    expect(container.querySelector('[id="switchContainer"]')!.closest('div')).toHaveClass('disabled');
    expect(container.querySelector('[id="switchContainer"]')!.closest('div')).toHaveAttribute('tabindex', '-1');
  });

  it('Renders semantic ToggleSwitch component', async () => {
    const { container } = render(<ToggleSwitch isSemantic={true} id="TogglerWithoutLabelNormal" onToggle={(val) => {}} selected={false} />);

    //semnatic class should be added
    expect(container.querySelector('[id="switchContainer"]')!.firstElementChild).toHaveClass('semantic');
  });

  it('Check toggle click for ToggleSwitch component', async () => {
    const handleToggle = jest.fn();
    const { container } = render(<ToggleSwitch isSemantic={true} id="TogglerWithoutLabelNormal" onToggle={handleToggle} selected={false} />);

    fireEvent(
      container.querySelector('[id="switchContainer"]')!.closest('div') as HTMLDivElement,
      new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
      }),
    );

    expect(handleToggle).toHaveBeenCalledTimes(1);
  });

  it('Check toggle click not fired when ToggleSwitch disabled', async () => {
    const handleToggle = jest.fn();
    const { container } = render(<ToggleSwitch disabled={true} id="TogglerWithoutLabelNormal" onToggle={handleToggle} selected={false} />);

    //check disabled
    expect(container.querySelector('[id="switchContainer"]')!.closest('div')).toHaveClass('disabled');
    //simulate click
    fireEvent(
      container.querySelector('[id="switchContainer"]')!.closest('div') as HTMLDivElement,
      new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
      }),
    );
    //check callback not called
    expect(handleToggle).toHaveBeenCalledTimes(0);
  });

  it('Check toggle onkeydown ev for ToggleSwitch component', async () => {
    const handleToggle = jest.fn();
    const { container } = render(<ToggleSwitch isSemantic={true} id="TogglerWithoutLabelNormal" onToggle={handleToggle} selected={false} />);

    fireEvent.keyDown(container.querySelector('[id="switchContainer"]')!.closest('div') as HTMLDivElement, { key: 'Enter', code: 'Enter', charCode: 13 });

    expect(handleToggle).toHaveBeenCalledTimes(1);
  });
});