'use strict';

// Helper Method
const ENDPOINT = 'users',
    ROOT     = 'https://jsonplaceholder.typicode.com';

const makeRequest = function makeRequest(path, item) {
return new Promise(function(resolve, reject) {
  // Assumes jQuery
  path ? (path = '/' + path) : path = '/';
  item ? (item = '/' + item) : item = '/';
  const url = ROOT + path + item;
  
  $.getJSON(url)
    .done(function (data) {
      resolve(data);
    })
    .fail(function () {
      reject();
    })
});
};
  
// Code goes here
const select    = document.getElementById('js-select-endpoint'),
    id_select = document.getElementById('js-select-id'),
    response_box = document.getElementById('js-response-box');

// STREAM of button clicks on ENDPOINT selection
const endpoint_stream = 
  Rx.Observable.fromEvent(select, 'click').
    map(event  => event.target).
    map(target => (target.options[target.selectedIndex].text.toLowerCase()));


const id_stream = 
  Rx.Observable.fromEvent(id_select, 'click').
    map(event  => event.target).
    map(target => target.options[target.selectedIndex].text.toLowerCase());
    
const request_stream  = 
  // To wait until BOTH fields get updated, use zip:
  //   endpoint_stream.zip(id_stream) 
  endpoint_stream.combineLatest(id_stream).
    // Emits ARRAY: First element is from endpoint_stream, second is from id_stream
    map(data => makeRequest(data[0], data[1]))
    // Only hit server for DIFFERENT requests
    .distinctUntilChanged()
    .debounce(1000)
    .switch()
    .subscribe(response => {
      response_box.innerHTML = JSON.stringify(response, null, 2);
    });