// @flow
import React from 'react';
import { Checkbox } from '../../icon/checkbox';
import {
  mountWrappedComponent,
  shallowWrappedComponent,
  renderSnapshot,
} from '../../../../utils/tests';
import type { CheckboxStandaloneProps } from './checkbox-standalone.proptypes';
import { CheckboxStandalone } from './index';

const DEFAULT_PROPS: CheckboxStandaloneProps = {
  label: 'A good label',
  selected: false,
  onClick: jest.fn(),
  required: false,
  disabled: false,
};

describe('CheckboxStandalone', () => {
  describe('snapshot', () => {
    it('matches the previous snapshot', () => {
      const checkbox = renderSnapshot(
        <CheckboxStandalone {...DEFAULT_PROPS} />,
      );
      expect(checkbox).toMatchSnapshot();
    });
  });

  it('renders a clickable container', () => {
    const checkbox = shallowWrappedComponent(
      <CheckboxStandalone {...DEFAULT_PROPS} />,
    ).dive();

    expect(checkbox.find('ClickableBox').props()).toEqual({
      stacked: 'row',
      align: 'center',
      children: expect.anything(),
      onClick: DEFAULT_PROPS.onClick,
      selected: DEFAULT_PROPS.selected,
    });
  });

  it('triggers onClick if not disabled', () => {
    const handleOnClick = jest.fn();
    const checkbox = shallowWrappedComponent(
      <CheckboxStandalone
        {...DEFAULT_PROPS}
        disabled={false}
        onClick={handleOnClick}
      />,
    ).dive();

    expect(handleOnClick).toHaveBeenCalledTimes(0);

    const clickable = checkbox.find('ClickableBox');
    clickable.simulate('click');

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

  it('does not trigger onClick if disabled', () => {
    const handleOnClick = jest.fn();
    const checkbox = shallowWrappedComponent(
      <CheckboxStandalone
        {...DEFAULT_PROPS}
        disabled
        onClick={handleOnClick}
      />,
    ).dive();

    expect(handleOnClick).toHaveBeenCalledTimes(0);

    const clickable = checkbox.find('ClickableBox');
    clickable.simulate('click');

    expect(handleOnClick).toHaveBeenCalledTimes(0);
  });

  it('renders a label', () => {
    const checkbox = shallowWrappedComponent(
      <CheckboxStandalone {...DEFAULT_PROPS} />,
    ).dive();

    expect(checkbox.contains(DEFAULT_PROPS.label)).toBe(true);
  });

  it('renders an invisible input', () => {
    const checkbox = mountWrappedComponent(
      <CheckboxStandalone {...DEFAULT_PROPS} />,
    );

    const invisibleInput = checkbox.find('input');

    expect(invisibleInput.props()).toEqual({
      type: 'checkbox',
      className: expect.any(String),
      id: expect.any(String),
      checked: DEFAULT_PROPS.selected,
      required: DEFAULT_PROPS.required,
      readOnly: true,
      disabled: DEFAULT_PROPS.disabled,
    });

    expect(invisibleInput).toHaveStyleRule('opacity', '0');
  });

  it('both the invisible and visible inputs are selected at the same time', () => {
    const selectedState = [true, false];

    selectedState.forEach(state => {
      const checkbox = mountWrappedComponent(
        <CheckboxStandalone {...DEFAULT_PROPS} selected={state} />,
      );

      const visibleInput = checkbox.find(Checkbox);
      const invisibleInput = checkbox.find('input');

      expect(visibleInput.prop('checked')).toBe(
        invisibleInput.prop('selected'),
      );
    });
  });
});
