import React from 'react';
import {connect} from 'react-redux';
import style from './buttonControlCountGoods.module.sass';
import {buttonControlCountGoods} from "../../../constants/typesComponents";
import {goodsBasketDataUpdate} from "../../../actions/actionCreator";


const ButtonControlCountGoods = (props) => {
    const {buttonType, goodData, basketData, closeModal} = props;
    const cloneBasketData = basketData.concat();

    const incrementHandler = () => {
        goodData.count++;
        props.updateBasketData(cloneBasketData);
    };

    const decrementHandler = () => {
        goodData.count--;
        cloneBasketData.forEach((elem, index) => {
            if(elem.selectedGoodId === goodData.selectedGoodId && goodData.count === 0) {
                cloneBasketData.splice(index, 1)
            }
        });
        props.updateBasketData(cloneBasketData);
    };

    if(buttonType == buttonControlCountGoods.INCREMENT) {
        return (
            <div className={style.mainContainer} onClick={incrementHandler}>
                PLUS
            </div>
    );
    }else if(buttonType == buttonControlCountGoods.DECREMENT) {
        return (
            <div className={style.mainContainer} onClick={decrementHandler}>
                MINUS
            </div>
        )
    }
};

const mapStateToProps = state => {
    const {basketData} = state.goodsBasketReducers;

    return {
        basketData
    }
};
const mapDispatchToProps = dispatch => ({
    updateBasketData: (basketData) => dispatch(goodsBasketDataUpdate(basketData))
});

export default connect(mapStateToProps, mapDispatchToProps)(ButtonControlCountGoods);