const { useState, useEffect, useRef, useMemo } = React
const { createRoot } = ReactDOM
const container = document.querySelector('#rick-and-morty')
const root = createRoot(container)

const RickAndMorty = () => {
  const [page, setPage] = useState(1)
  const [totalPages, setTotalPages] = useState(1)
  const [searchTerm, setSearchTerm] = useState('')
  const [searching, setSearching] = useState(true)
  const [searched, setSearched] = useState(false)
  const [characters, setCharacters] = useState([])
  const [totalCharacters, setTotalCharacters] = useState(0)
  const [error, setError] = useState(false)

  const firstCharacter = useRef(null)

  const apiUrl = 'https://rickandmortyapi.com/api/character/'

  const handleSearchInput = useMemo(() =>
    debounce(value => {
      setPage(1)
      setSearchTerm(value)
      setSearching(true)
      setSearched(true)
    })
  )

  const handlePageChange = page => {
    setPage(prevPage => prevPage + page)
    setSearched(true)
  }

  useEffect(() => {
    const fetchController = new AbortController()
    
    fetch(`${apiUrl}?page=${page}&name=${searchTerm}`)
      .then(res => res.json())
      .then(data => {
        if (data.error) {
          // No results
          setTotalPages(1)
          setCharacters([])
        } else {
          // Results found
          setTotalPages(data.info.pages)
          setTotalCharacters(data.info.count)
          setCharacters([...data.results])
        }
        // Reset any previous error state
        setError(false)
      })
      .catch(() => {
        // Error fetching from API
        setError(true)
        setTotalPages(1)
        setCharacters([])
      })
      .finally(() => setSearching(false))
    
    return () => fetchController.abort()
  }, [searchTerm, page])

  useEffect(() => {
    if (searched && characters.length > 0) {
      // Focus first character in list
      firstCharacter.current.focus()
    }
  }, [characters])

  return (
    <>
      <Header />
      <main>
        <Search
          handleSearchInput={ e => handleSearchInput(e.target.value) }
        />
        <Results
          page={ page }
          totalPages={ totalPages }
          characters={ characters }
          firstCharacter={ firstCharacter }
          totalCharacters={ totalCharacters }
          searching={ searching }
          error={ error }
        />
        {
          !searching && totalPages > 1 && (
            <Pagination
              page={ page }
              totalPages={ totalPages }
              prevPage={ () => handlePageChange(-1) }
              nextPage={ () => handlePageChange(1) }
            />
          )
        }
      </main>
    </>
  )
}

const Header = () => {
  return (
    <header className='header'>
      <h1 className='header__heading'>
        Rick <span>And</span> Morty
      </h1>
    </header>
  )
}

const Search = ({ handleSearchInput }) => {
  return (
    <div className='search'>
      <label htmlFor='search' className='search__label'>
        Character Search:
      </label>
      <input
        type='text'
        id='search'
        className='search__input'
        placeholder='e.g. rick'
        spellCheck='false'
        onChange={ handleSearchInput }
      />
    </div>
  )
}

const Results = ({
  page,
  totalPages,
  characters,
  firstCharacter,
  totalCharacters,
  searching,
  error
}) => {
  return (
    <div className='results' aria-live='polite'>
      {
        searching ? (
          <Loader />
        ) : (
          <>
            {
              characters.length > 0 ? (
                <>
                  <p className='results__info'>
                    Showing { (page - 1) * characters.length + 1 }-{ page === totalPages ? totalCharacters : page * characters.length } of { totalCharacters } characters
                  </p>
                  {
                    characters.map((character, index) => (
                      <Character
                        character={ character }
                        key={ character.id }
                        index={ index }
                        firstCharacter={ firstCharacter }
                      />
                    ))
                  }
                </>
              ) : (
                error ? (
                  <p className='results__message'>Error Retrieving Characters</p>
                ) : (
                  <p className='results__message'>No Characters Found</p>
                )
              )
            }
          </>
        )
      }

    </div>
  )
}

const Loader = () => {
  return (
    <div className='loader'>
      <span className='sr-only'>Loading</span>
    </div>
  )
}

const Character = ({ character, firstCharacter, index }) => {
  return (
    <details className='character'>
      <summary
        className='character__name'
        ref={ index === 0 ? firstCharacter : null }
      >
        { character.name }
      </summary>
      <div className='character__content'>
        <div className='character__info'>
          <details className='character__item' open>
            <summary className='character__item-summary'>Name</summary>
            <p className='character__item-info'>{ character.name }</p>
          </details>
          <details className='character__item' open>
            <summary className='character__item-summary'>Species</summary>
            <p className='character__item-info'>{ character.species }</p>
          </details>
          <details className='character__item' open>
            <summary className='character__item-summary'>Gender</summary>
            <p className='character__item-info'>{ character.gender }</p>
          </details>
          <details className='character__item' open>
            <summary className='character__item-summary'>Location</summary>
            <p className='character__item-info'>{ character.location.name }</p>
          </details>
        </div>
        <div className='character__image-container'>
          <img
            className='character__image'
            src={ character.image }
            alt={ character.name }
          />
        </div>
      </div>
    </details>
  )
}

const Pagination = ({ page, totalPages, prevPage, nextPage }) => {
  return (
    <nav className='pagination' aria-label="page navigation">
      <p className='pagination__info'>
        Page { page } of { totalPages }
      </p>
      {
        page > 1 && (
          <button className='pagination__btn' onClick={ prevPage }>
            Prev Page
          </button>
        )
      }
      {
        page < totalPages && (
          <button className='pagination__btn' onClick={ nextPage }>
            Next Page
          </button>
        )
      }
    </nav>
  )
}

const debounce = (func, wait = 800) => {
  let timeout

  return function () {
    const context = this
    const args = arguments

    clearTimeout(timeout)

    timeout = setTimeout(() => {
      timeout = null
      func.apply(context, args)
    }, wait)
  }
}

root.render(<RickAndMorty />)

console.log('Wubba Lubba Dub-Dub! 👴🏻👦🍾🔬🔫🌌🚀🛸👾');