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;
