// @flow
import React from 'react';
import { StyleSheet } from 'react-native';
import { shallow } from 'enzyme';
import Button from './Button';
import { colors } from '../Utils/Theme';
import styles from './Button.styles';

describe('Button component', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = shallow(<Button title="Accept" />);
  });

  it('has a text label', () => {
    const text = wrapper.find('Typography');
    expect(text).toExist();
    expect(text).toHaveProp('type', 'button');
    expect(text).toHaveProp('text', 'Accept');
  });

  it('is a button type by default', () => {
    expect(wrapper.find({ accessibilityRole: 'button' })).toExist();
  });

  it('can be a link', () => {
    const href = 'https://fernandopasik.com';
    const target = '_blank';
    wrapper.setProps({ href, target });
    const link = wrapper.find({ accessibilityRole: 'link' });
    expect(link).toExist();
    expect(link).toHaveProp('href', href);
    expect(link).toHaveProp('target', target);
  });

  it('by default is not raised', () => {
    expect(wrapper.find('Elevation')).toHaveProp('level', 0);
  });

  it('can be raised', () => {
    wrapper.setProps({ raised: true });
    expect(wrapper.find('Elevation')).toHaveProp('level', 2);
  });

  it('when clicking raised elevation increases', () => {
    wrapper.setProps({ raised: true });
    wrapper.find('Ripple').simulate('press');
    expect(wrapper.find('Elevation')).toHaveProp('level', 2);
    wrapper.find('Ripple').simulate('pressIn');
    expect(wrapper).toHaveState('isPressed', true);
    expect(wrapper.find('Elevation')).toHaveProp('level', 8);
    wrapper.find('Ripple').simulate('pressOut');
    expect(wrapper).toHaveState('isPressed', false);
    expect(wrapper.find('Elevation')).toHaveProp('level', 2);
  });

  it('can be primary', () => {
    wrapper.setProps({ primary: true });
    expect(wrapper.find('Typography').find({ color: colors.primary })).toExist();
  });

  it('can be secondary', () => {
    wrapper.setProps({ secondary: true });
    expect(wrapper.find('Typography').find({ color: colors.secondary })).toExist();
  });

  it('can be primary and raised', () => {
    wrapper.setProps({ primary: true, raised: true });
    expect(wrapper.find('Typography').find({ color: 'rgb(255, 255, 255)' })).toExist();
    expect(wrapper.find('View').first())
      .toHaveProp('style', expect.objectContaining({ backgroundColor: colors.primary }));
  });

  it('can be secondary and raised', () => {
    wrapper.setProps({ secondary: true, raised: true });
    expect(wrapper.find('Typography').find({ color: 'rgb(255, 255, 255)' })).toExist();
    expect(wrapper.find('View').first())
      .toHaveProp('style', expect.objectContaining({ backgroundColor: colors.secondary }));
  });

  it('can be dense', () => {
    wrapper.setProps({ dense: true });
    expect(wrapper.find({ accessibilityRole: 'button' }).prop('style'))
      .toEqual(expect.objectContaining(StyleSheet.flatten(styles.dense) || {}));
  });

  it('can be compact', () => {
    wrapper.setProps({ compact: true });
    expect(wrapper.find({ accessibilityRole: 'button' }).prop('style'))
      .toEqual(expect.objectContaining(StyleSheet.flatten(styles.compact) || {}));
  });
});
