import { Input, Card, Button, Space } from 'antd';
import { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { actionChangeCategName } from '../action';

const CategoryAdmin = ({category, _id, changeCategName }) => { 

  const [nameCat, setNameCat] = useState(category.name); 
  
  useEffect ( () => {
    setNameCat(category.name)
  }, [category])

  const renewCategory = () => {
    changeCategName(_id, nameCat);// console.log('zzz', typeof _id)
    setNameCat('');
  }

  const clearInput = () => { 
    setNameCat(''); 
  }

  return (
   <div >
      <Card type="inner" title="Изменить категорию товара">
        <Input value={nameCat} onChange={ (e) => setNameCat(e.target.value)}/>
        <Space>
          <Button type="primary" onClick={renewCategory}>Сохранить изменения</Button>
          <Button type="primary" onClick={clearInput} >Очистить поле</Button>
        </Space>
        
      </Card>
  </div>
    
  )
}

const mapStateToProps = (state) => ({
  category: state.promise. catById?.payload || {},
  allcategory: state.promise.rootCats?.payload || [],
})

const NameCategory = connect(mapStateToProps, { changeCategName :actionChangeCategName })(CategoryAdmin);

export default NameCategory;