import { useEffect, useRef } from 'react'
import { useDispatch } from 'react-redux'
import { setQuery } from './app/searchSlice'
import { setShowName } from './app/displaySlice'
import { IconList } from './IconList'
import './App.css'

function App() {
	const inputSearch = useRef()
	const checkShowName = useRef()
	const dispatch = useDispatch()

	function queryOnChange () {
		dispatch(setQuery(inputSearch.current.value))
	}

	function showNameOnChange () {
		dispatch(setShowName(checkShowName.current.checked))
	}

	useEffect(() => {
		inputSearch.current.focus()
	})

	return (
		<>
			<input type='text' id='search' ref={ inputSearch } onChange={ queryOnChange } placeholder="Search an icon — try ‘fruit’, ‘logo’, ‘ui’" />
			<div id='display-options'>
				<input type="checkbox" name="checkShowName" ref={ checkShowName } onChange={ showNameOnChange } id='checkShowName' />
				<label htmlFor="checkShowName">Display icon names</label>
			</div>
			<IconList></IconList>
		</>
	)
}

export default App