import { from, observe } from 'quel'


const div$ = document.querySelector('div')

// 👇 encapsulate the value of the input
const input = from(document.querySelector('textarea'))

// 👇 compute some other values based on that (changing) value
const chars = $ => $(input)?.length ?? 0
const words = $ => $(input)?.split(' ').length ?? 0

// 👇 use the calculated value in a side-effect
observe($ => div$.textContent = `${$(chars)} chars, ${$(words)} words`)

//
// this code creates a timer whose rate changes
// based on the value of an input
//

import { from, observe, Timer } from 'quel'


const div$ = document.querySelector('div')
const input = from(document.querySelector('input'))
const rate = $ => parseInt($(input) ?? 100)

//
// 👇 wait a little bit after the input value is changed (debounce),
//    then create a new timer with the new rate.
//
//    `timer` is a "higher-order" source of change, because
//    its rate also changes based on the value of the input.
//
const timer = async $ => {
  await sleep(200)
  return $(rate) && new Timer($(rate))
}

observe($ => {
  //
  // 👇 `$(timer)` would yield the latest timer, 
  //     and `$($(timer))` would yield the latest
  //     value of that timer, which is what we want to display.
  //
  const elapsed = $($(timer)) ?? '-'
  div$.textContent = `elapsed: ${elapsed}`
})

import { from, observe } from 'https://esm.sh/quel'

const timer = new Timer(1000)
const input = from(document.querySelector('#my-input'))

const chars = $ => $(input).length

const obs = observe($ => console.log($(timer) + ' : ' + $(chars)))

obs.stop()
timer.stop()

import { Subject } from 'quel'

const a = new Subject()
a.set(2)

import { Timer } from 'quel'

const timer = new Timer(1000)

import { from } from 'quel'

const click = from(document.querySelector('button'))
const hover = from(document.querySelector('button'), 'hover')
const input = from(document.querySelector('input'))

src.get()

src.stop()

await src.stops()

const sum = $ => $(a) + $(b)

import { SKIP } from 'quel'

const odd = $ => $(a) % 2 === 0 ? SKIP : $(a)

const response = async $ => {
  // a debounce to avoid overwhelming the
  // server with requests.
  await sleep(200)
  
  if ($(query)) {
    try {
      const res = await fetch('https://pokeapi.co/api/v2/pokemon/' + $(query))
      const json = await res.json()

      return JSON.stringify(json, null, 2)
    } catch {
      return 'Could not find Pokemon'
    }
  }
}

const variableTimer = $ => new Timer($(input))
const message = $ => 'elapsed: ' + $($(timer))

import { STOP } from 'quel'

let count = 0
const take5 = $ => {
  if (count++ > 5) return STOP

  return $(src)
}

import { observe } from 'quel'

observe($ => console.log($(message)))

const y = observe($ => $(x) * 2)
console.log(y.get())

const obs = observe($ => ...)
obs.stop()

let ctrl = new AbortController()

const data = observe(async $ => {
  await sleep(200)
  
  // 👇 pass abort controller signal to fetch to cancel mid-flight requests
  const res = await fetch('https://my.api/?q=' + $(input), {
    signal: ctrl.signal
  })

  return await res.json()
}, () => {
  ctrl.abort()
  ctrl = new AbortController()
})

import { iterate } from 'quel'

for await (const i of iterate(src)) {
  // do something with it
}

const timer = new Timer(500)

// 👇 loop body is slower than the source. values will be lost!
for await (const i of iterate(timer)) {
  await sleep(1000)
  console.log(i)
}

const timer = new Timer(1000)

// ... whatever ...

timer.stop()

const obs = observe($ => $(src))

// ... whatever ...

obs.stop()

const src = new Source(async emit => {
  await sleep(1000)
  emit('Hellow World!')
})

const myTimer = new Source(emit => {
  let i = 0
  const interval = setInterval(() => emit(++i), 1000)
  
  // 👇 clear the interval when the source is stopped
  return () => clearInterval(interval)
})

// 👇 with async producers, use a callback to specify cleanup code
const asyncTimer = new Source(async (emit, finalize) => {
  let i = 0
  let stopped = false
  
  finalize(() => stopped = true)
  
  while (!stopped) {
    emit(++i)
    await sleep(1000)
  }
})

class MyTimer extends Source {
  constructor(rate = 200) {
    super()
    this.rate = rate
    this.count = 0
  }
  
  toggle() {
    if (this.interval) {
      this.interval = clearInterval(this.interval)
    } else {
      this.interval = setInterval(
        // call this.emit() to emit values
        () => this.emit(++this.count),
        this.rate
      )
    }
  }
  
  // override stop() to clean up
  stop() {
    clearInterval(this.interval)
    super.stop()
  }
}

// combine two sources:
$ => $(a) + $(b)

// debounce:
async $ => {
  await sleep(1000)
  return $(src)
}

// flatten (e.g. switchMap):
$ => $($(src))

// filter a source
$ => $(src) % 2 === 0 ? $(src) : SKIP

// take until other source emits a value
$ => !$(notifier) ? $(src) : STOP

// batch emissions
async $ => (await Promise.resolve(), $(src))

// batch with animation frames
async $ => {
  await Promise(resolve => requestAnimationFrame(resolve))
  return $(src)
}

// merge sources
new Source(emit => {
  const obs = sources.map(src => observe($ => emit($(src))))
  return () => obs.forEach(ob => ob.stop())
})

// throttle
let timeout = null
  
$ => {
  const value = $(src)
  if (timeout === null) {
    timeout = setTimeout(() => timeout = null, 1000)
    return value
  } else {
    return SKIP
  }
}

import { interval, map, filter } from 'rxjs'

const a = interval(1000)
const b = interval(500)

combineLatest(a, b).pipe(
  map(([x, y]) => x + y),
  filter(x => x % 2 === 0),
).subscribe(console.log)

import { Timer, observe } from 'quel'

const a = new Timer(1000)
const b = new Timer(500)

observe($ => {
  const sum = $(a) + $(b)
  if (sum % 2 === 0) {
    console.log(sum)
  }
})