import React, { useState, useEffect } from 'react';
import sinon from 'sinon';
import Adapter from 'enzyme-adapter-react-16';
import { mount, configure } from 'enzyme';

configure({ adapter: new Adapter() });

function useFormInput(initial_value = '') {
    const [value, setValue] = useState(initial_value);

    function handle_change(e) {
        setValue(e.target.value);
    }

    return {
        value
        , onChange: handle_change
    };
}

function Input(props) {
    return (
        <div>
            <input {...props} />
        </div>
    );
}

function ControlledInputWithEnhancedInput({ searchSomething }) {
    const search = useFormInput();

    useEffect(
        () => { searchSomething(search.value); }
        , [search.value]
    );

    return (
        <Input {...search} />
    );
}

function ControlledInputWithNativeInput({ searchSomething }) {
    const search = useFormInput();

    useEffect(
        () => { searchSomething(search.value); }
        , [search.value]
    );

    return (
        <input {...search} />
    );
}

it('does not succeed', () => {
    jest.useFakeTimers();

    const spy = sinon.spy();
    const component = mount(<ControlledInputWithEnhancedInput searchSomething={spy} />);

    component.simulate('change', { target: { value: 'foo' } });
    jest.runAllTimers();

    expect(spy.withArgs('foo').calledOnce).toBe(true);
});

it('does succeed', () => {
    jest.useFakeTimers();

    const spy = sinon.spy();
    const component = mount(<ControlledInputWithNativeInput searchSomething={spy} />);

    component.simulate('change', { target: { value: 'foo' } });
    jest.runAllTimers();

    expect(spy.withArgs('foo').calledOnce).toBe(true);
});