import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import reduxLang from '../middleware/lang';
import { Redirect } from 'react-router-dom';

const _StartScreen = ({ t, search }) => {
	const [searchQuery, setSearchQuery] = useState('');
	const [searched, setSearched] = useState(false);

	const handleSearchInput = event => {
		setSearchQuery(event.target.value);
	};

	const handleSearch = event => {
		event.preventDefault();
		search(searchQuery);
		setSearched(true);
	};

	if (searched) {
		return <Redirect to='/' />;
	}

	return (
		<div className='StartScreen'>
			<Link to='/'>
				<img src='/static/gfx/alps_x.svg' alt='close' />
			</Link>
			<form onSubmit={handleSearch}>
				<input
					className='medium-text'
					type='text'
					id='start-screen-search-field'
					placeholder={t('placeholder')}
					value={searchQuery}
					onChange={handleSearchInput}
				/>
				<img src='/static/gfx/alps_lupe.svg' alt='search' />
			</form>
		</div>
	);
};
const StartScreen = reduxLang('StartScreen')(_StartScreen);
export default StartScreen;