<div id="app"></div>

const xs = window.xstream.default;

const { div, label, input, button, p, makeDOMDriver } = CycleDOM;
const isolate = CycleIsolate.default;
function view(state$) {
  return state$.map(state => {
    return div(".labeled-slider", [
      label(".label", `${state.label}: ${state.value} ${state.unit}`),
      input(".slider", {
        attrs: {
          type: "range",
          min: state.min,
          max: state.max,
          value: state.value
        }
      })
    ]);
  });
}
function intent(sources) {
  const domSource = sources.DOM;
  const value$ = domSource
    .select(".slider")
    .events("input")
    .map(ev => ev.target.value);
  return { value: value$ };
}
function model(intents, props) {
  const { value } = intents;
  return props
    .map(props =>
      value.startWith(props.init).map(value => ({ ...props, value }))
    )
    .flatten();
}
function Slider(sources) {
  const actions = intent(sources);
  const state$ = model(actions, sources.props);
  const vdom$ = view(state$);
  return { DOM: vdom$ };
}
function main(sources) {
  const weightProps = xs.of({
    label: "Weight",
    min: 40,
    max: 100,
    init: 58,
    unit: "kg"
  });
  const weightSlider = isolate(Slider, ".weight");
  const weightSinks = weightSlider({
    ...sources,
    props: weightProps
  });
  const heightProps = xs.of({
    label: "Height",
    min: 140,
    max: 220,
    init: 165,
    unit: "cm"
  });
  const heightSlider = isolate(Slider, ".height");
  const heightSinks = heightSlider({
    ...sources,
    props: heightProps
  });
  const vdom$ = xs
  .combine(weightSinks.DOM, heightSinks.DOM)
  .map(([weightVDOM, heightVDOM]) => div([weightVDOM, heightVDOM]));
  return { DOM: vdom$ };
}

const drivers = {
  DOM: makeDOMDriver("#app")
};

Cycle.run(main, drivers);