import React from 'react';

import { shallow, mount } from 'enzyme';

import NoteInput from '../NoteInput';

import { Plain } from 'slate'

const setup = (propOverrides, doMount=false) => {

  const props = Object.assign({

      addNote: jest.fn()

  }, propOverrides);

  const renderFn = doMount?mount:shallow;

  const wrapper = renderFn(<NoteInput {...props} />);

  return {

    props,

    wrapper,

  }

};

// Element.focus() doesn't work

// @see https://stackoverflow.com/questions/42213522/mocking-document-createrange-for-jest

beforeAll(() => {

  window.getSelection = () => {

    return {

      removeAllRanges: () => {},

      addRange: () => {}

    };

  };

  window.Range = function Range() {};

  const createContextualFragment = (html) => {

    const div = document.createElement('div');

    div.innerHTML = html;

    return div.children[0]; // so hokey it's not even funny

  };

  Range.prototype.createContextualFragment = (html) => createContextualFragment(html);

  // HACK: Polyfil that allows codemirror to render in a JSDOM env.

  window.document.createRange = function createRange() {

    return {

      setEnd: () => {},

      setStart: () => {},

      getBoundingClientRect: () => {

        return { right: 0 };

      },

      compareBoundaryPoints: () => {

        return 0;

      },

      getClientRects: () => [],

      createContextualFragment,

    };

  };

});

describe('Notes container Component', () => {

  test('render', () => {

    const { wrapper } = setup();

    expect(wrapper.exists()).toBe(true)

  });

  test('button is disabled when there is no text', () => {

    const { props, wrapper } = setup({}, true);

    const button = wrapper.find('button');

    expect(button.prop('disabled')).toBe(true);

  });

  test('button is not disabled when there is text', () => {

    const { props, wrapper } = setup({}, true);

    const button = wrapper.find('button');

    const editor = wrapper.find('SlateEditor').find('Editor').node;

    // FIXME simulate('change') doesn't work

    editor.onChange(Plain.deserialize('Hello world'));

    expect(button.prop('disabled')).toBe(false);

  });

  // test('click button', () => {

  //     const { props, wrapper } = setup({}, true);

  //     wrapper.find('button').simulate('click');

  //     expect(props.addNote.mock.calls.length).toBe(1);

  // });

  // test('note value on clickbutton', () => {

  //     const { props, wrapper } = setup({}, true);

  //     // This does nothing... must find a way to make it work

  //     wrapper.find('SlateEditor').simulate('change', {target: {value: 'note text'}});

  //     wrapper.find('button').simulate('click');

  //     expect(props.addNote.mock.calls.length).toBe(1);

  //     // cf. previous comment

  //     //expect(props.addNote.mock.calls[0]).toEqual(['note text']);

  // });

});