import React from 'react';
import style from './buttonFavourite.module.sass';
import {appendFavouriteGoods, deleteFavouriteGoods} from "../../../actions/actionCreator";
import {connect} from 'react-redux';


const ButtonFavourite = (props) => {
    const { idAttribute } = props;

    console.log(props.favouriteGoods);


    if( props.favouriteGoodsIDsArray && props.favouriteGoodsIDsArray.indexOf(idAttribute) !== -1 ) {
        return (
            <div className={style.mainContainer}>
                <p onClick={() => props.deleteFavouriteGoods(idAttribute)}>
                    Убрать из избраного
                </p>
            </div>
        );
    }else {
        return (
            <div className={style.mainContainer}>
                <p onClick={() => props.appendFavouriteGoods(idAttribute)}>
                    В избранное
                </p>
            </div>
        );
    }
};

const mapStateToProps = state => {
  const { favouriteGoods, isFetching, favouriteGoodsIDsArray } = state.favouriteGoodsReducers;

  return {
      favouriteGoods, isFetching, favouriteGoodsIDsArray
  }
};

const mapDispatchToProps = dispatch => ({
   appendFavouriteGoods: (goodsId) => dispatch(appendFavouriteGoods(goodsId)),
    deleteFavouriteGoods: goodsId => dispatch(deleteFavouriteGoods(goodsId))
});

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