import {useState} from "react";
import {store, actionSearch} from "../reducers";
import {BrowserRouter as Router, Route, Link, Switch, Redirect} from 'react-router-dom';
import { useHistory } from "react-router-dom";




const SearchInput = ({ classname = "search", input = "Пошук"}) => {
    const [name, changeValue] = useState("Пошук");
    const history = useHistory();
 
    return(
      <>
        <div className = {classname}>
            <input type = "text" placeholder = {input} onChange = {e => changeValue(e.target.value)} onKeyDown = {(e) => e.keyCode == 13 && history.push(`/search/${name}`)}/>
            <Link to = {"/search/" + name}>
                <button id = "searchButton">пуск</button>
            </Link>
        </div>
      </>
    )
  }

  const SearchUserInput = ({}) => {
    const history = useHistory();
    const [searchInput, changeValue] = useState("Пошук");
    return (
    <div className = "userSearch">
      <input type = "text" placeholder = "Пошук юзера" onChange = {e => changeValue(e.target.value)} onKeyDown = {(e) => e.keyCode == 13 && history.push(`/searchUser/${searchInput}`)}/>
      <Link to = {"/searchUser/" + searchInput}>
          <button>Пошук</button>
      </Link>
    </div>
    )


  }

  export {SearchInput, SearchUserInput};