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

const NewGoodInCat = ({cat, add}) => {
  const [_idCat, setIdCat] = useState('');
  const [nameCat, setNameCat] = useState('');
  const [nameGood, setNameGood] = useState('');

  useEffect(() => {
    if (cat) {
      setIdCat(cat._id);
      setNameCat(cat.name);
    }                                            
  }, [cat])

  const addGoodClearInput = () => {
    add(_idCat, nameCat, nameGood); 
    setNameGood('');
  }

  return (
    < >
      <Card type="inner" title="Добавить товар в категорию">
       <div>Введите название товара </div> 
       <Input  value={nameGood} onChange={(e) => setNameGood(e.target.value)}/>
        <Space>
         <Button type="primary" onClick={() => addGoodClearInput()}>Сохранить изменения</Button>
         <Button type="primary" onClick={setNameGood}>Очистить поле</Button>
        </Space>
      </Card>
    </>
  )
}

const mapStateToProps = (state) => ({
  cat: state.promise.catById?.payload, 
})
const CNewGoodInCat = connect(mapStateToProps, {add: actionAddGoodToCat})(NewGoodInCat);
export default CNewGoodInCat;