'use strict';

var _CycleDOM = CycleDOM;
var h4 = _CycleDOM.h4;
var a = _CycleDOM.a;
var button = _CycleDOM.button;
var p = _CycleDOM.p;
var label = _CycleDOM.label;
var input = _CycleDOM.input;
var h1 = _CycleDOM.h1;
var hr = _CycleDOM.hr;
var div = _CycleDOM.div;
var makeDOMDriver = _CycleDOM.makeDOMDriver;
var _CycleHTTPDriver = CycleHTTPDriver;
var makeHTTPDriver = _CycleHTTPDriver.makeHTTPDriver;

// DOM read effect: button clicked
// HTTP write effect: request sent
// HTTP read effect: response received
// dom write effect: data display
function main(sources) {

  var clickEvent$ = sources.DOM.select('.get-first').events('click');
  var request$ = clickEvent$.map(function () {
    return {
      url: 'https://jsonplaceholder.typicode.com/users/1',
      method: 'GET'
    };
  });

  var response$$ = sources.HTTP.filter(function (response$) {
    return response$.request.url === 'https://jsonplaceholder.typicode.com/users/1';
  });

  var response$ = response$$['switch']();
  var firstUser$ = response$.map(function (response) {
    return response.body;
  }).startWith(null);

  return {

    DOM: firstUser$.map(function (firstUser) {
      return div([button('.get-first', 'Get first user'), firstUser === null ? null : div('.user-details', [h1('.user-name', firstUser.name), h4('.user-email', firstUser.email), a('.user-website', { href: firstUser.website }, firstUser.website)])]);
    }),
    HTTP: request$
  };
}

// source: input (read) effects
// sink: output (write) effects

function consoleLogDriver(msg$) {
  msg$.subscribe(function (msg) {
    return console.log(msg);
  });
}

var drivers = {
  HTTP: makeHTTPDriver(),
  DOM: makeDOMDriver('#app')
};

Cycle.run(main, drivers);