const increaseButton = document.querySelector("#increase");
const increase = Rx.Observable
    .fromEvent(increaseButton, "click")
    .map(() => state => state.update("count", count => count + 1));

const decreaseButton = document.querySelector("#decrease");
const decrease = Rx.Observable
    .fromEvent(decreaseButton, "click")
    .map(() => state => state.update("count", count => count - 1));

const inputElement = document.querySelector("#input");
const input = Rx.Observable
    .fromEvent(inputElement, "input")
    .map(event => state => state.set("count", event.target.value));

const clock = Rx.Observable
    .interval(0, Rx.Scheduler.animationFrame)
    .scan(
        previous => {
            const time = performance.now();
            return previous.merge({
                time,
                delta: time - previous.get("time")
            });
        },
        Immutable.fromJS({
            time: performance.now(),
            delta: 0
        })
    );

const initialState = Immutable.fromJS({
    count: 0,
    inputValue: ""
});

const state = Rx.Observable
    .merge(increase, decrease, input)
    .scan((state, changeFn) => changeFn(state), initialState);

const loop = clock.withLatestFrom(state, (clock, state) => ({ clock, state }));

loop.subscribe(({ clock, state }) => {
    document.querySelector("#count").innerHTML = state.get("count");
    document.querySelector("#hello").innerHTML = `Hello ${state.get(
        "inputValue"
    )}`;
});

loop.sampleTime(250, Rx.Scheduler.animationFrame).subscribe(({ clock }) => {
    document.querySelector("#clock").innerHTML = `${Math.round(
        clock.get("delta") * 1000
    )}μs`;
});