import { Input, Button  } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import {Link} from 'react-router-dom';

const InputSearchG = ({nick}) => { 
  const [inputValue, setInputValue] = useState('');
  const [user, setUser] = useState(nick);
  
  useEffect(() => { 

    if(nick && nick.acl && nick.acl.includes('admin')) {
      setUser('admin')
    }

  }, [nick])

  
  return (
    < >
      <Input placeholder="Найти товар " value={inputValue} size="middle" style={{ width: '40%' }} onChange={(e) => setInputValue(e.target.value)}/>
      <Link to={`/search/${inputValue}`}><Button icon={<SearchOutlined />} onClick={() => setInputValue('')}/></Link>
     
    </>
  )
}

const mapStateToProps = (state) => ({
  nick: state.auth.payload?.sub || '',
}) 

const InputSearchGood = connect(mapStateToProps)(InputSearchG);

export default InputSearchGood;