const { fromEvent, from } = rxjs;
const { debounceTime, map, tap, switchMap, flatMap } = rxjs.operators;

const fieldset = document.querySelector("fieldset");
const resultsArea = document.querySelector(".results-area");

const eventToRequestBody = event => ({
  status: event.target.checked,
  id: event.target.value,
  name: event.target.name
});

const changes1$ = fromEvent(fieldset, "input");

changes1$
  .pipe(
    map(eventToRequestBody),
    tap(requestBody => setItemInteractivity(requestBody.id, false)),
  
  // what happens if you use switchMap here? Answer is at the bottom of the pen
    flatMap(requestBody => {
      return from(fakeSave(requestBody)).pipe(
        map(saveResponse => ({ ...requestBody, response: saveResponse }))
      );
    }),
   tap(responseInfo => setItemInteractivity(responseInfo.id, true)),
    map(JSON.stringify)
  )
  .subscribe(text => (resultsArea.innerText = text));

const setItemInteractivity = (id, active) => {
  document.getElementById(id).disabled=!active
   
  const spinner = document.querySelector(`label[for=${id}] + div`)
  active ? spinner.classList.add('hidden') : spinner.classList.remove('hidden')
}


/**
 * End of real frontend code.
 * This stuff provides a fake backend - an async function that returns results of writing data
 */
function roughDelay() {
  return new Promise(resolve =>
    setTimeout(resolve, 100 + Math.random() * 3000)
  );
}

function fakeSave(data) {
  return roughDelay().then(() => {
    return Math.random() > 0.7;
  });
}

// if we use switchMap here, the app only cares about the most recent http request, and activity indicators for previous http requests aren't removed when the response completes if multiple updates are happening at once
// switchMap(requestBody => {


// since flatMap does not discard any events, every http request that finishes stays in the stream
// flatMap(requestBody => {