import xs from 'xstream';
import {run} from '@cycle/run';
import {div, input, p, makeDOMDriver} from '@cycle/dom';
import {html} from 'snabbdom-jsx';


function main(sources) {
    const weightProps$ = xs.of({
        label: 'Weight', unit: 'kg', min: 40, value: 70, max: 150
    })

    const heightProps$ = xs.of({
        label: 'Height', unit: 'cm', min: 10, value: 170, max: 210
    })

    const weightSources = {
        DOM: sources.DOM,
        props: weightProps$
    }

    const heightSources = {
        DOM: sources.DOM,
        props: heightProps$
    }

    const weightSlider = LabeledSlider(weightSources)
    const heightSlider = LabeledSlider(heightSources)
    const weightDom$ = weightSlider.DOM
    const weightValue$ = weightSlider.value
    const heightVDom$ = heightSlider.DOM
    const heightValue$ = heightSlider.value

    const value$ = xs.combine(weightValue$, heightValue$)
    .map( ([weight, height]) => {
        const heightMeters = height * 0.01
        const bmi = Math.round(weight / (heightMeters * heightMeters))
        return bmi
    })

    const dom$ = xs.combine(value$, weightDom$, heightVDom$)
    .map( ([bmi, weight, height]) => {
        return  <div>
                    { weight }
                    { height }
                    <h2>{ 'BMI is ' + bmi }</h2>
                </div>
    })
  return {
      DOM: dom$
  }
}


function LabeledSlider(sources) {
    const domSources = sources.DOM
    const props$ = sources.props

    const newValue$ = domSources
    .select('.slider')
    .events('input')
    .map(ev => ev.target.value)

    const state$ = props$
    .map(
        props => newValue$.map(val => ({
            label: props.label,
            unit: props.unit,
            min: props.min,
            value: val,
            max: props.max
          })).startWith(props)
    )
    .flatten()
    .remember()


    const vdom$ = state$.map( state => {
        return  <div class="labeled-slider">
                    <span class="label">{state.label + ' ' + state.value + state.unit}</span>
                    <input type="range" class="slider" min={state.min} max={state.max} value={state.value}/>
                </div> 
    })
    const sinks = {
        DOM: vdom$,
        value: state$.map(val => val.value),
    }
    return sinks
}

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

run(main, drivers);