import React from "react";
import style from "./modalBasketGoodsElement.module.sass";
import {pathStaticGoodsImages} from "../../../../constants/images";
import {buttonControlCountGoods} from "../../../../constants/typesComponents";
import {connect} from 'react-redux';
import ButtonControlCountGoods from '../../../buttons/buttonControlCountGoods/buttonControlCountGoods';


const ModalBasketGoodsElement = (props) => {

    const {simpleGoodsData, closeModal} = props;
    return(
        <div className={style.mainContainer}>
            <img src={pathStaticGoodsImages + simpleGoodsData.mainPicture} alt={"mainPictureGoods"}/>
            <div className={style.mainPart}>
                <h1>{simpleGoodsData.goodsName}</h1>
                <p>{simpleGoodsData.goodsDescription}</p>
                <h2>{simpleGoodsData.volume.toUpperCase()}</h2>
                <div className={style.controls}>
                    <ButtonControlCountGoods
                        goodData={simpleGoodsData}
                        buttonType={buttonControlCountGoods.INCREMENT}
                    />
                    <h2> {simpleGoodsData.count} </h2>
                    <ButtonControlCountGoods
                        goodData={simpleGoodsData}
                        buttonType={buttonControlCountGoods.DECREMENT}
                        closeModal={() => closeModal()}
                    />
                </div>
            </div>
            <h2>{(simpleGoodsData.price * simpleGoodsData.count).toFixed(2)} грн.</h2>
        </div>
    );

};

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

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


export default connect(mapStateToProps)(ModalBasketGoodsElement);