const root = document.getElementById('root')
const bus = new Bulb.Bus()

// A signal that searches for books by ISBN and emits the result as a new state.
const searchSignal = bus
  // Don't bother searching for empty queries.
  .filter(a => a !== '')

  // Search for the book using the API.
  .concatMap(findBook)

  // Create a new state.
  .map(result => ({ result, loading: false }))

// A signal that emits a loading state while the request is processing.
const loadingSignal = bus.always({ result: null, loading: true })

// Start with the default state and re-render the view when the other signals emit values.
Bulb.Signal.of({ result: null, loading: false })
  .merge(searchSignal, loadingSignal)
  .subscribe(
    state => ReactDOM.render(<RootView bus={bus} loading={state.loading} result={state.result} />, root)
  )

// Returns a signal that emits the result of the search request to the API.
function findBook (isbn) {
  const url = `https://www.googleapis.com/books/v1/volumes?q=isbn:${isbn}`
  return Bulb.Signal
    .fromPromise(fetch(url).then(response => response.json()))
    .map(
      data => data.totalItems > 0 ? data.items[0].volumeInfo.title : null
    )
}

function RootView ({ bus, loading, result }) {
  const [query, setQuery] = React.useState('')

  return (
    <div className='jumbotron jumbotron-fluid'>
      <div className='container'>
        <h1>Book Search 📚</h1>
        <p className='lead'>This example demonstrates using a signal to handle an AJAX request.</p>
        <p>Enter an ISBN to find on Google Books (e.g. 0747532699).</p>
        <div class='input-group mb-3'>
          <input className='form-control' onChange={event => setQuery(event.target.value)} placeholder='ISBN' type='text' />
          <div className='input-group-append'>
            <Button disabled={loading} onClick={() => bus.next(query)}>
              {loading ? <Spinner /> : null}
              Search
            </Button>
          </div>
        </div>
        {result ? <pre>{result}</pre> : null}
      </div>
    </div>
  )
}

function Button ({ children, disabled, onClick }) {
  return (
    <button className='btn btn-primary' disabled={disabled} onClick={onClick}>{children}</button>
  )
}

function Spinner () {
  return (
    <React.Fragment>
      <span className='spinner-grow spinner-grow-sm' role='status' aria-hidden='true'></span>
      &nbsp;
    </React.Fragment>
  )
}