import React, {useState} from "react";
import {connect} from 'react-redux';
import style from "./goodsCard.module.sass";
import {pathStaticGoodsImages} from "../../constants/images";
import ButtonBuy from "../buttons/buttonBuy/buttonBuy.js";
import ButtonFavourites from '../buttons/buttonFavourite/buttonFavourite.js';
import GoodsAttributesSelector from "../inputs/goodsAttributesSelector/goodsAttributesSelector";

const GoodsCard = (props) =>  {
    const { simpleGoodsData } = props;
    const[price, setPrice] = useState(simpleGoodsData.GoodsAttributes[0].price);
    const[valueAttribute, setValueAttribute] = useState(simpleGoodsData.GoodsAttributes[0].valueAttribute);
    const[idAttribute, setIdAttribute] = useState(simpleGoodsData.GoodsAttributes[0].id);
    const[arrayPicturesForGoods, setArrayPictures] = useState(simpleGoodsData.GoodsAttributes[0].imgUrlArray);

    return (
        <div className={style.mainContainer}>
            <div className={style.goodsCardHover}>
                <div className={style.hiddenPart}>
                    <GoodsAttributesSelector
                        setPrice={setPrice}
                        setValueAttribute={setValueAttribute}
                        setArrayPictures={setArrayPictures}
                        setIdAttribute={setIdAttribute}
                        simpleGoodAttributes={simpleGoodsData.GoodsAttributes}
                    />
                    <ButtonBuy
                        simpleGoodsData={simpleGoodsData}
                        changedValueAttributes={valueAttribute}
                        changedPrice={price}
                    />
                    {
                        props.token && (
                            <ButtonFavourites
                                idAttribute={idAttribute}
                            />
                        )
                    }
                </div>
            </div>

            <a href={`/product/${simpleGoodsData.id}`} className={style.goodsCardContent}>
                <img src={pathStaticGoodsImages
                    + arrayPicturesForGoods[0]} alt={"pictureGoods"} />
                <h1>{simpleGoodsData.goodsName}</h1>
                <p>{simpleGoodsData.goodsDescription}</p>
                <p>{price} грн</p>
            </a>

        </div>
        );

};

const mapStateToProps = state => {
    const { token } = state.signUpReducers;

    return {
        token
    }
};

export default connect(mapStateToProps)(GoodsCard);