import * as React from 'react';
import {
  render,
  screen
} from '@testing-library/react';
import '@testing-library/jest-dom';
import userEvent from '@testing-library/user-event';
import * as CheckControlBase from '@tesseract-design/web-base-checkcontrol';
import { ToggleTickBox } from '.';

jest.mock('@tesseract-design/web-base-checkcontrol');

describe('ToggleTickBox', () => {
  it('should render a checkbox', () => {
    render(
      <ToggleTickBox />
    );
    const checkbox = screen.getByRole('checkbox');
    expect(checkbox).toBeInTheDocument();
  });

  describe('on indeterminate', () => {
    it('should render an indeterminate checkbox', () => {
      render(
        <ToggleTickBox
          indeterminate
        />
      );
      const checkbox = screen.getByRole('checkbox');
      expect(checkbox).toHaveProperty('indeterminate', true);
    });

    it('should acknowledge passed ref', () => {
      const ref = React.createRef<HTMLInputElement>()
      render(
        <ToggleTickBox
          indeterminate
          ref={ref}
        />
      );
      expect(ref.current).toHaveProperty('indeterminate', true);
    });
  });

  it('should render a compact tick box', () => {
    render(
      <ToggleTickBox
        compact
      />
    );

    expect(CheckControlBase.CheckIndicatorArea).toBeCalledWith(expect.objectContaining({
      compact: true,
    }));
  });

  it('should render a block tick box', () => {
    render(
      <ToggleTickBox
        block
      />
    );

    expect(CheckControlBase.ClickAreaWrapper).toBeCalledWith(expect.objectContaining({
      block: true,
    }));
  });

  it('should render a subtext', () => {
    render(
      <ToggleTickBox
        subtext="subtext"
      />
    );
    const subtext: HTMLElement = screen.getByTestId('subtext');
    expect(subtext).toBeInTheDocument();
  });

  it('should handle click events', () => {
    const onClick = jest.fn();
    render(
      <ToggleTickBox
        onClick={onClick}
      />
    );
    const checkbox: HTMLInputElement = screen.getByRole('checkbox');
    userEvent.click(checkbox);
    expect(onClick).toBeCalled();
  });

  it('should handle change events', () => {
    const onChange = jest.fn();
    render(
      <ToggleTickBox
        onChange={onChange}
      />
    );
    const checkbox: HTMLInputElement = screen.getByRole('checkbox');
    userEvent.click(checkbox);
    expect(onChange).toBeCalled();
  });
});
