import React, { useState, useEffect, useCallback } from 'react'
import axios from 'axios'
import { useDispatch } from 'react-redux'
import { debounce } from 'debounce'

import { setText, setLang } from '../store/actions.js'

async function search(searchTerm) {
  const regex = new RegExp(searchTerm, 'i')
  const result = []
  const data = await import('../../data/gutenberg.json').then(
    module => module.default
  )
  for (let entry of data) {
    if (regex.test(entry.title[0]) || regex.test(entry.author[0])) {
      result.push(entry)
    }

    if (result.length >= 20) break
  }
  return result
}

const Book = ({ entry }) => {
  const dispatch = useDispatch()
  const { author, language, rights, subject, title, id } = entry

  const handleClick = async () => {
    const url = `https://gutenberg.muperfredi.de/texts/${id}/stripped-body`
    const text = await axios.get(url).then(res => res.data.body)
    dispatch(setText(text))
    dispatch(setLang(language[0]))
  }
  return (
    <div>
      <div>
        {id} {title.join(' - ')}
      </div>
      <div>{author[0]}</div>
      <div>{language.join(' - ')}</div>
      <div>
        <button onClick={handleClick}>Load</button>
      </div>
      <br></br>
    </div>
  )
}

export const GutenbergSearch = () => {
  const [searchTerm, setSearchTerm] = useState('')
  const [result, setResult] = useState([])
  const [loading, setLoading] = useState(false)

  const debouncedSearch = useCallback(
    debounce(async term => {
      setLoading(true)
      await search(term).then(setResult)
      setLoading(false)
    }, 500),
    []
  )

  useEffect(() => {
    if (searchTerm.length > 0) {
      debouncedSearch(searchTerm)
    }
  }, [searchTerm, debouncedSearch])

  return (
    <div>
      <h2>Search for books in the Gutenberg Project</h2>
      <input
        value={searchTerm}
        onChange={e => setSearchTerm(e.target.value)}
      ></input>
      {loading && 'loading...'}
      {result.map(entry => (
        <Book key={entry.id} entry={entry} />
      ))}
      {result.length === 0 && <div>'no results to display'</div>}
    </div>
  )
}