import React, { useState, useEffect } from 'react'
import { Helmet } from 'react-helmet'
import { CSSTransition } from 'react-transition-group'
import SearchInput from './SearchInput'
import SearchButton from './SearchButton'
import SearchResults from './SearchResults'
import styles from './index.module.scss'
export default function Search() {
const [searchOpen, setSearchOpen] = useState(false)
const [query, setQuery] = useState('')
const [results, setResults] = useState([])
useEffect(() => {
if (!query || !window.__LUNR__) {
setResults([])
return
}
const lunrIndex = window.__LUNR__['en']
const searchResults = lunrIndex.index.search(query)
setResults(
searchResults.map(({ ref }) => {
return lunrIndex.store[ref]
})
)
}, [query])
const toggleSearch = () => {
setSearchOpen(!searchOpen)
}
return (
<>
{searchOpen && (
<>
setQuery(e.target.value)}
onToggle={toggleSearch}
/>
)}
)
}