import * as number from './number'
import * as dom from './dom'

/* Set up inputs for the ingredients */

const itemEntries =
  dom.nodeListToArray(document.querySelectorAll('.g-Recipe__Content ul > li'))
    .map(itemNode => ({ name: 'li', node: itemNode }))

const h1 = document.querySelector<HTMLElement>('.g-Recipe__Content h1')

if (h1 !== null) {
  itemEntries.push({ name: 'h1', node: h1 })
}

const inputs = setupInputs(itemEntries)

inputs.map(input => {
  input.node.oninput = e => {
    if (e.target !==null) {
      const parsed = number.parse((e.target as HTMLInputElement).value)

      if (parsed !== undefined) {
        const factor = parsed.number / input.number
        inputs.map(input2 => {
          if (input.node !== input2.node) {
            input2.node.value = number.prettyPrint(input2.number * factor)
          }
        })
      }
    }
  }
})

interface InputTag {
  name: string;
  node: HTMLElement;
}

interface InputResult {
  number: number,
  node: HTMLInputElement
}

function setupInputs(tags: InputTag[]): InputResult[] {
  const res: InputResult[] = []

  tags.forEach(tag => {
    const parsed = number.parseInsideText(tag.node.innerText)

    if (parsed !== undefined) {
      const numberNode = number.node(tag.name, parsed)
      dom.replace(tag.node, numberNode.node)
      res.push({
        number: parsed.number,
        node: numberNode.numberInput
      })
    }
  })

  return res
}

/* Set up done marks for steps */

dom.nodeListToArray(document.querySelectorAll('.g-Recipe__Content ol > li')).forEach(todo => {
  todo.onclick = e => {
    dom.toggleClassName(todo, 'g-Recipe__Completed')
    e.stopPropagation()
  }
})