// @flow
import React from 'react';
import {
  mountWrappedComponent,
  renderSnapshot,
} from '../../../../../utils/tests';
import { Selector } from '../index';
import type { SelectorItemProps } from './selector-item.proptypes';
import { _SelectorItem as SelectorItem } from './index';

const DEFAULT_PROPS: SelectorItemProps = {
  children: <span>Child</span>,
  id: 'selector-id',
  value: 'vanilla',
  name: 'ice-cream',
  type: 'text',
  label: 'a good label',
  secondaryLabel: 'another good label',
  checked: false,
  disabled: false,
  large: false,
};

describe('SelectorItem', () => {
  const noop = () => {};

  describe('snapshot', () => {
    it('matches the previous snapshot', () => {
      const handleOnChange = jest.fn();
      const selectorItem = renderSnapshot(
        <SelectorItem {...DEFAULT_PROPS} onChange={handleOnChange} />,
      );
      expect(selectorItem).toMatchSnapshot();
    });
  });

  it('has the correct styling when size context = "sm"', () => {
    const wrapper = mountWrappedComponent(
      <Selector name="test" size="sm" onChange={noop}>
        <SelectorItem id="test" onChange={noop} value="test" label="label" />
      </Selector>,
    );

    const labelWrapper = wrapper.find('LabelWrapper');
    expect(labelWrapper).toHaveStyleRule('margin', '5px 0');

    const inputContainer = wrapper.find('InputContainer');
    expect(inputContainer).toHaveStyleRule('width', '32px', {
      modifier: 'svg',
    });
  });

  it('has the correct styling when size context = "lg"', () => {
    const wrapper = mountWrappedComponent(
      <Selector name="test" size="lg" onChange={noop}>
        <SelectorItem id="test" onChange={noop} value="test" label="label" />
      </Selector>,
    );

    const primaryLabelText = wrapper.find('PrimaryLabelText');
    expect(primaryLabelText).toHaveStyleRule('font-weight', '700');

    const boxFlex = wrapper.find('BoxFlex');
    expect(boxFlex).toHaveStyleRule('padding', '8px 30px');
  });
});
