import React from 'react';
import { shallow, mount } from 'enzyme';

import { Form } from 'components/Form';
import { translate, I18nWrapper } from '__mocks__/i18n';

const syntaxes = {
  js: 'Javascript',
  pcre: 'PCRE'
};

describe('Form', () => {
  test('rendering', () => {
    const component = shallow(
      <Form t={ translate } syntaxes={ syntaxes }/>
    );
    expect(component).toMatchSnapshot();
  });

  test('rendering with download URLs', () => {
    const downloadUrls = [
      { url: '#svg', filename: 'image.svg', type: 'image/svg+xml', label: 'Download SVG' },
      { url: '#png', filename: 'image.png', type: 'image/png', label: 'Download PNG' }
    ];
    const component = shallow(
      <Form t={ translate } syntaxes={ syntaxes } downloadUrls={ downloadUrls }/>
    );
    expect(component).toMatchSnapshot();
  });

  test('rendering with permalink URL', () => {
    const permalinkUrl = '#permalink';
    const component = shallow(
      <Form t={ translate } syntaxes={ syntaxes } permalinkUrl={ permalinkUrl }/>
    );
    expect(component).toMatchSnapshot();
  });

  test('changing expression input', () => {
    const component = shallow(
      <Form t={ translate } syntaxes={ syntaxes }/>
    );
    const eventObj = {
      target: { name: 'expr', value: 'Testing value' }
    };
    component.find('[name="expr"]').simulate('change', eventObj);

    expect(component.state('expr')).toEqual('Testing value');
  });

  test('changing syntax input', () => {
    const component = shallow(
      <Form t={ translate } syntaxes={ syntaxes }/>
    );
    const eventObj = {
      target: { name: 'syntax', value: 'Testing value' }
    };
    component.find('[name="syntax"]').simulate('change', eventObj);

    expect(component.state('syntax')).toEqual('Testing value');
  });

  test('setting expression and syntax via props', () => {
    const component = shallow(
      <Form t={ translate } syntaxes={ syntaxes }/>
    );
    expect(component.state()).toEqual(expect.objectContaining({
      expr: undefined,
      syntax: 'js'
    }));
    component.setProps({ expr: 'Testing expression' });
    expect(component.state()).toEqual(expect.objectContaining({
      expr: 'Testing expression',
      syntax: 'js'
    }));
    component.setProps({ syntax: 'testing syntax' });
    expect(component.state()).toEqual(expect.objectContaining({
      expr: 'Testing expression',
      syntax: 'testing syntax'
    }));
  });

  describe('submitting expression', () => {
    const build = (props = {}) => {
      const component = mount(
        <I18nWrapper>
          <Form syntaxes={ syntaxes } { ...props }/>
        </I18nWrapper>
      );
      return component;
    };

    test('submitting form', () => {
      const onSubmit = jest.fn();
      const component = build({ onSubmit });
      const eventObj = { preventDefault: jest.fn() };
      component.find(Form).instance().setState({ syntax: 'test', expr: 'Test expression' });
      component.find('form').simulate('submit', eventObj);

      expect(eventObj.preventDefault).toHaveBeenCalled();
      expect(onSubmit).toHaveBeenCalledWith({
        expr: 'Test expression',
        syntax: 'test'
      });
    });

    test('submitting form with Shift+Enter', () => {
      const component = build({ onSubmit: Function.prototype });
      const form = component.find(Form).instance();
      const eventObj = { charCode: 13, shiftKey: true };
      jest.spyOn(form, 'handleSubmit');
      component.find('textarea').simulate('keypress', eventObj);

      expect(form.handleSubmit).toHaveBeenCalled();
    });

    test('not submitting with just Enter', () => {
      const component = build({ onSubmit: Function.prototype });
      const form = component.find(Form).instance();
      const eventObj = { charCode: 13, shiftKey: false };
      jest.spyOn(form, 'handleSubmit');
      component.find('textarea').simulate('keypress', eventObj);

      expect(form.handleSubmit).not.toHaveBeenCalled();
    });
  });
});