var mount = require('choo/mount')
var html = require('choo/html')
var css = require('sheetify')
var choo = require('choo')
var olivaw = require('olivaw')()

css('tachyons')
var style = css('./index.css')

var app = choo()

app.model({
  state: {
    generation: "generation",
    year: [],
    cell: null 
  },
  reducers: {
    run: function (state, data) {
      return { generation: data}
    }
  },
  effects: {
    automata: function (state, data, send, done) {
      var automaton = olivaw.set(101, data)
      var automata = olivaw.run(20, automaton)
      
      send('run', automata, function(err, val) {
        if (err) return done(err)
        done(null, val)
      })
    }
  }
})

function mainView (state, prev, send) {
  var inputBoxClass = 'input-reset ba b--black-20 pa2 mb2 db w-50'

  return html`
    <body>
      <main class="pa4">
        <div class=${style}>
          <form class="black-80" onsubmit=${runAutomata}>
            <div class="measure"
              <label for="rule" class="f6 b db mb2">Rule</label>
              <input id="rule" class=${inputBoxClass} type="text">
              <small id="rule-desc" class="f6 black-60 db mb2">A rule number between 0 to 256.</small>
              <input type="submit" class="dn">
          </form>
          <div>${getGeneration(state, prev, send)}</div>
        </div>
      </main>
    </body>
  `
  function runAutomata (e) {
    e.preventDefault()
    send('automata', e.target[0].value)
  }
}

function getGeneration (state, prev, send) {
  // need to iterate over the generation and get individual year
  // and cell state
  return html`
    <div class="year">
      <div class="cell"></div>
    </div>
  `
}

app.router(['/', mainView])
mount('body', app.start())

@@ -966,16 +966,17 @@
 measure%22
+%3E
 %0A       
@@ -1250,16 +1250,35 @@
 s=%22dn%22%3E%0A
+            %3C/div%3E%0A
         
@@ -1301,16 +1301,35 @@
     %3Cdiv
+ class=%22generation%22
 %3E$%7BgetGe
@@ -1558,90 +1558,171 @@
 %7B%0A  
-// need to iterate over the generation and get individual year%0A  // and cell state
+if (!Array.isArray(state.generation)) return%0A  state.generation.forEach(function (year) %7B%0A    console.log(year)%0A    getYear(year)%0A  %7D)%0A%7D%0A%0Afunction getYear (year) %7B
 %0A  r
@@ -1732,21 +1732,16 @@
 rn html%60
-%0A    
 %3Cdiv cla
@@ -1754,53 +1754,106 @@
 ar%22%3E
-%0A      %3Cdiv class=%22cell%22%3E%3C/div%3E%0A    %3C/div%3E%0A  
+$%7BgetCell(year)%7D%3C/div%3E%60%0A%7D%0A%0Afunction getCell (year) %7B%0A  return html%60%3Cdiv class=$%7Byear.state%7D%3E%3C/div%3E
 %60%0A%7D%0A

set up a func for each nested layer"