var button = document.getElementById('button');

function Observable(forEach) {
  this._forEach = forEach;
}

// TWO POSSIBILITIES TO CALL AN OBSERVABLE

/*
obser.forEach(x => ...., e=>......, () => .....);
observer.forEach({ onNext: x => ......, onError: e => ....., onCompleted: () => .....})
*/
Observable.prototype = {
  forEach: function(onNext, onError, onCompleted) {
    // are they passing in functions
    if (typeof onNext === 'function') {
      return this._forEach({
       onNext: onNext,
       onError: onError || function() {},
       onCompleted: onCompleted || function() {}
     })
    }
    else {
      // are they passing an Observer
      // onNext is { onNext: () =>, onError: () => ...}
      return this.forEach(onNext);
    }
  },
  map: function(projectionFunction) {
    var self = this;
    // mapped observable
    return new Observable(function forEach(observer) {
      return self.forEach(
        function onNext(x) { observer.onNext(projectionFunction(x)); },
        function onError(e) { observer.onError(e); },
        function onCompleted() {observer.onCompleted(); })
    });
  },
  filter: function(predicateFunction) {
    // this is the observable that make the map, filter, reduce, etc call
    var self = this;
    // filter observable
    return new Observable(function forEach(observer) {
      return self.forEach(
        x => { if (predicateFunction(x)) observer.onNext(x); },
        e => observer.onError(e),
        () => observer.onCompleted()
      )
    });
  },
  take: function(num) {
    // Reference to source observable
    var self = this;
    // Take observable
    return new Observable(function forEach(observer) {
      var counter = 0,
        subscription = self.forEach(
        function onNext(value) {
          observer.onNext(value);
          counter++;
          if (counter === num) {
            observer.onCompleted();
            subscription.dispose();
          }
       },
         error =>  observer.onError(error),
         () => observer.onCompleted()
      )
    });
  }
}

//Creating an observable from a event based API
Observable.fromEvent = function(dom, eventName) {
  return new Observable(function forEach(observer) {
    var handler = (event) => observer.onNext(event);

    dom.addEventListener(eventName, handler);
    // Subscription
    return {
      dispose: () => {
           dom.removeEventListener(eventName, handler);
      }
    };
  });
};

// DEPRECATED FUNCTION Object.observe.
// USING RX Observable.create method
// var Observable = Rx.Observable;
// Observable.observations = (obj) => {
//     return Observable.create(observer => {
//         var handler = (event) => observer.onNext(event);

//         Object.observe(obj, handler);

//         //subscription
//         // the rx libray wraps the subscription for us, we just pass the property for 'un-hook' the event
//         return () => Object.unobserve(obj, handler);
//     });
// };


// var person = {name: 'Mario'};

// Observable.observations(person).forEach(changes => {
//   console.log(changes);
// });

// person.name = "Andres";
// person.age = 23;

var buttonClick = Observable.fromEvent(button, 'click');

// buttonClick.forEach(x => console.log(x.pageX));

var testObservable = buttonClick.map(x => ({pageX: x.pageX, pageY: x.pageY}));

testObservable.filter(x => x.pageX > 50).take(5).forEach(x => console.log(x.pageX + 'px'));