/*
 * Map some range to another. e.g.: 1-100 -> 100-2000
 */
function mapMinMax(min, max, minAt, maxAt, value) {
  return Math.round(Math.max(min,
    max - Math.min(minAt, value) / (minAt / maxAt)
  ))
}

/*
 * Info Popup component
 */
function InfoTemplate(content) {
  return `
    <div class="info-popup-container">
      <span class="info-popup-icon">?</span>
      <div class="info-popup">
        ${content}
      </div>
    </div>
  `
}

/*
 * Settings Form component
 */
function settingsTemplate(state) {
  function propIfExists(key, value) {
    return typeof value !== 'undefined' ?
      `${key}="${value}"` : ''
  }

  var fields = Object.keys(state).reduce((acc, key) => {
    var field = state[key]
    return acc + `
      <div class="field field--${field.type}">

        <label class="field-label" for="${key}">
          ${field.label}
        </label>

        ${ field.type == 'select' ? `
          <select id="${key}" name="${key}">
            ${ field.options.reduce((a, opt) => a + `
              <option
                ${ field.value == opt ? 'selected' : '' }
                value="${opt}">
                ${opt}
              </option>
            `, '') }
          </select>
        ` : `
          <input
            type="${field.type}"
            id="${key}"
            name="${key}"
            ${ propIfExists('value', field.value) }
            ${ propIfExists('min', field.min) }
            ${ propIfExists('max', field.max) }
            ${ propIfExists('required', field.required) } />
        ` }

        ${ field.explanation ?
          InfoTemplate(field.explanation) :
        '' }
      </div>
    `
  }, '')

  var footer = `
    <div class="footer">
      <input
        class="btn"
        type="submit"
        value="Apply Changes" />
    </div>
  `

  return fields + footer
}

/*
 * Return the coressponding value if the penEnv
 * matches any. penEnv comes from:
 * https://codepen.io/pavlovsk/pen/jmXOmo
 */
function envValue(values) {
  return values[window.penEnv] || values.actual
}

/*
 * Informations about some fields in the settings
 */
var Explanations = (_ => {
  function _applyMacros(html) {
    return html
      .replace(
        /\$wiki\((\w+)(|,\s(\w+))\)/g,
        `<a
          href="https://en.wikipedia.org/wiki/\$1"
          target="_blank">
          \$3
          </a>
        `
      )
  }

  var $explanations = db.querySelector('#explanations')

  return {
    ruleNumber: _applyMacros(
      $explanations
        .querySelector('#rule-number')
        .innerHTML
    ),

    initialMethod: _applyMacros(
      $explanations
        .querySelector('#initial-method')
        .innerHTML
    )
  }
})()

/*
 * Fields used in settings form. These values
 * will be updated whenever the form is submitted.
 */
var UIState = {
  cellSize: {
    label: 'Cell Size (px)',
    type: 'number',
    value: envValue({
      picked: 8,
      featured: 10,
      thumbnail: 8,
      actual: 1
    }),
    min: 1,
    max: 999,
    required: true
  },

  rowLength: {
    label: 'Cells in a row',
    type: 'number',
    value: envValue({
      picked: 50,
      featured: 121,
      thumbnail: 50,
      actual: 480
    }),
    min: 1,
    max: 99999,
    required: true
  },

  steps: {
    label: 'Steps',
    type: 'number',
    value: envValue({
      picked: 60,
      featured: 62,
      thumbnail: 60,
      actual: 640
    }),
    min: 1,
    max: 99999,
    required: true
  },

  ruleNumber: {
    label: 'Rule Number',
    type: 'number',
    explanation: Explanations.ruleNumber,
    value: envValue({
      picked: 110,
      featured: 30,
      thumbnail: 110,
      actual: 110
    }),
    min: 0,
    max: 255,
    required: true
  },

  initial: {
    label: 'Initialization method',
    type: 'select',
    value: envValue({
      picked: 'random',
      featured: 'middle',
      thumbnail: 'random',
      actual: 'last'
    }),
    options: ['random', 'first', 'middle', 'last'],
    explanation: Explanations.initialMethod,
    required: true
  },

  bgColor: {
    label: 'Color for 0\'s',
    type: 'color',
    value: '#000000',
    required: true
  },

  fgColor: {
    label: 'Color for 1\'s',
    type: 'color',
    value: '#ffffff',
    required: true
  }
}

/*
 * Retrieve the ui state variable with the key.
 */
function ui(key) {
  return UIState[key].value
}

/*
 * Generate a new row of cells based on the old cells
 * and the given rule.
 */
function generateCells(cells, rule) {
  return new Array(cells.length)
    .join(' ')
    .split(' ')
    .map((cell, i) => {
      var prev = cells[i - 1] || 0
      var curr = cells[i] || 0
      var next = cells[i + 1] || 0
      return rule(+prev, +curr, +next, i, cells.length)
    })
}

function generateCellsChunk(cells, rule, size = 1) {
  var chunk = [cells]
  while (size-- > 0) {
    chunk.push(generateCells(chunk[chunk.length - 1], rule))
  }
  return chunk
}

/*
 * Get a number 0-7 (inclusive) from the 3 bits
 * e.g.: (1, 0, 1) => 5
 */
function getStateInt(prev, curr, next) {
  return parseInt([prev, curr, next].join(''), 2)
}

/*
 * Returns the binary representation of the
 * ruleNumber, in reversed order. This allows
 * making a direct lookup using a base-8 ([0-7])
 * integer representing the state. For example,
 * the bit for the state '101' is located at the
 * index 5, which translates to 101 in binary.
 *
 * e.g.: 110 => [0, 1, 1, 1, 0, 1, 1, 0]
 *               |  |  |  |  |  |  |  |
 *              000 | 010 | 100 | 110 |
 *                 001   011   101   111
 *
 * or:     3 => [1, 1, 0, 0, 0, 0, 0, 0]
 */
function getRule(ruleNumber) {
  return ('0'.repeat(8) + ruleNumber.toString(2))
    .slice(-8)
    .split('')
    .reverse()
    .map(Number)
}

var Rules = {
  random(density) {
    return _ => +(Math.random() <= density)
  },

  first(prev, curr, next, index, total) {
    return +(index == 0)
  },

  middle(prev, curr, next, index, total) {
    return +(index == Math.floor(total / 2))
  },

  last(prev, curr, next, index, total) {
    return +(index == total - 1)
  },

  /*
   * Finds the current state (prev, curr, next) of
   * an individual cell inside the rule, and apply
   * the found bit to the cell.
   *
   * Called in every turn of automata loop for each
   * cell to transform the cell into a new state.
   *
   * State is represented as a base-8 integer [0-7]
   * and used as index inside the rule.
   */
  number(ruleNumber) {
    return (prev, curr, next) => {
      var state = getStateInt(prev, curr, next)
      var rule = getRule(ruleNumber)
      return rule[state]
    }
  }

  /*
  90(prev, curr, next) {
    return prev ^ next
  }
  */
}

var settingsForm = document.createElement('form')
settingsForm.classList.add('settings-form')
settingsForm.innerHTML = settingsTemplate(UIState)
settingsForm.addEventListener('submit', e => {
  e.preventDefault()
  var formData = new FormData(settingsForm)
  Object.keys(UIState).forEach(field => {
    var value = formData.get(field)
    if (UIState[field].type == 'number') {
      value = +value
    }
    UIState[field].value = value
  })
  reset()
})
document.body.appendChild(settingsForm)

/*
 * Variables that make up app state.
 */
var canvas = null,
  canvasWidth = null,
  canvasHeight = null,
  ctx = null,
  render = null,
  currentRow = null,
  chunkOfCells = null,
  chunkSize = null

var minChunkSize = 1
var maxChunkSize = 75
var chunkSizeMinAt = 2000
var chunkSizeMaxAt = 100

/*
 * Start everything from scratch with the current state.
 */
function reset() {
  if (!canvas) {
    canvas = document.createElement('canvas')
    document.body.appendChild(canvas)
  }
  canvasWidth = ui('cellSize') * ui('rowLength')
  canvasHeight = ui('cellSize') * ui('steps')
  canvas.width = canvasWidth
  canvas.height = canvasHeight
  ctx = canvas.getContext('2d')
  currentRow = 0
  chunkOfCells = []
  chunkSize = mapMinMax(
    minChunkSize, 
    maxChunkSize, 
    chunkSizeMinAt, 
    chunkSizeMaxAt, 
    ui('rowLength')
  )
  cancelAnimationFrame(render)
  render = requestAnimationFrame(draw)
}

/*
 * Animation frame
 */
function draw() {
  if (currentRow >= ui('steps')) {
    return
  }

  // Generate initial row
  if (currentRow == 0) {
    var initialMethod = ui('initial')
    var initial = Rules[initialMethod]
    if (initialMethod == 'random') {
      initial = initial(.5)
    }
    chunkOfCells = [generateCells(
      new Array(ui('rowLength')),
      initial
    )]
  }

  // Generate all the remaining cells
  chunkOfCells = generateCellsChunk(
    chunkOfCells[chunkOfCells.length - 1], 
    Rules.number(ui('ruleNumber')),
    chunkSize
  )

  // Draw the cells
  var styles = [ ui('bgColor'), ui('fgColor') ]
  var cellSize = ui('cellSize')
  chunkOfCells.forEach((cells, offset) => {
    cells.forEach((cell, index) => {
      ctx.fillStyle = styles[cell]
      ctx.fillRect(
        cellSize * index,
        cellSize * currentRow + offset * cellSize,
        cellSize,
        cellSize
      )
    })
  })

  currentRow += chunkSize
  render = requestAnimationFrame(draw)
}

/*
 * Kick off first render.
 */
reset()