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

type Character = {
  id: string,
  name: string,
  species: string,
  gender: string,
  image: string,
  location: {
    name: string
  }
}

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<Character[]>([])
  const [totalCharacters, setTotalCharacters] = useState(0)
  const [error, setError] = useState(false)

  const firstCharacter = useRef<HTMLElement>(null)

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

  const handleSearchInput = useDebounce((value: string): void => {
    setPage(1)
    setSearchTerm(value)
    setSearching(true)
    setSearched(true)
  }, 800)

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

  useEffect(() => {
    const fetchController = new AbortController()
    const { signal } = fetchController
    
    fetch(`${apiUrl}?page=${page}&name=${searchTerm}`, { signal })
      .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>
  )
}

type SearchProps = {
  handleSearchInput: (e: ChangeEvent<HTMLInputElement>) => void
}

const Search = ({ handleSearchInput }: SearchProps) => {
  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>
  )
}

type ResultsProps = {
  page: number,
  totalPages: number,
  characters: Character[],
  firstCharacter: RefObject<HTMLElement>,
  totalCharacters: number,
  searching: boolean,
  error: boolean
}

const Results = ({
  page,
  totalPages,
  characters,
  firstCharacter,
  totalCharacters,
  searching,
  error
}: ResultsProps) => {
  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) => (
                      <CharacterItem
                        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>
  )
}

type CharacterProps = {
  character: Character,
  firstCharacter: RefObject<HTMLElement>,
  index: number,
}

const CharacterItem = ({ character, firstCharacter, index }: CharacterProps) => {
  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>
  )
}

type PaginationProps = {
  page: number,
  totalPages: number,
  prevPage: () => void,
  nextPage: () => void
}

const Pagination = ({ page, totalPages, prevPage, nextPage }: PaginationProps) => {
  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>
  )
}

type Timer = ReturnType<typeof setTimeout>
type SomeFunction = (...args: any[]) => void

function useDebounce<Func extends SomeFunction>(
  func: Func,
  delay = 1000
) {
  const timer = useRef<Timer>()

  useEffect(() => {
    return () => {
      if (!timer.current) return
      clearTimeout(timer.current)
    }
  }, [])

  const debouncedFunction = ((...args) => {
    const newTimer = setTimeout(() => {
      func(...args)
    }, delay)
    clearTimeout(timer.current)
    timer.current = newTimer
  }) as Func

  return debouncedFunction
}

root.render(<RickAndMorty />)

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