import React, {useState, useEffect} from "react";
import {connect} from "react-redux";
import { ClipLoader } from 'react-spinners';
import style from "./simpleGoodsContainer.module.sass";
import {brands} from "../../constants/navbarLiArray";
import SimpleGoodsSlider from "./goodsSlider/goodsSlider";
import GoodsAttributesSelector from "../inputs/goodsAttributesSelector/goodsAttributesSelector";
import ButtonBuy from "../buttons/buttonBuy/buttonBuy";
import ButtonFavourites from '../buttons/buttonFavourite/buttonFavourite.js';
import {getFavouriteGoods} from "../../actions/actionCreator";


const SimpleGoodsContainer = (props) => {
    const {
        goodsName,
        goodsDescription,
        goodsGender,
        goodsMadeIn,
        goodsBrandId,
        GoodsAttributes,
        id,
        goodsFullDescription
    } = props.simpleGoodsData;

    const[price, setPrice] = useState(GoodsAttributes[0].price);
    const[valueAttribute, setValueAttribute] = useState(GoodsAttributes[0].valueAttribute);
    const[arrayPicturesForGoods, setArrayPictures] = useState(GoodsAttributes[0].imgUrlArray);
    const[idAttribute, setIdAttribute] = useState(GoodsAttributes[0].id);

    const brand = brands[goodsBrandId - 1];

    useEffect(() => {
        props.getFevouriteGoods();
    }, []);


    return(
      <div className={style.mainContainer}>
          <div className={style.mainContentContainer}>
              <div className={style.description}>
                  <h2>{`${brand[0]} / ${goodsName}`}</h2>
                  <h1>{goodsName}</h1>
                  <h2>{goodsDescription}</h2>
                  <p>Сделанно в: {goodsMadeIn}</p>
                  <p>Пол: <span>{goodsGender}</span></p>
              </div>
              <SimpleGoodsSlider arrayPicturesForSlider={arrayPicturesForGoods} />
              <div className={style.controlsPanel}>
                  <h1>{price} грн.</h1>
                  <GoodsAttributesSelector
                      setPrice={setPrice}
                      setValueAttribute={setValueAttribute}
                      setArrayPictures={setArrayPictures}
                      setIdAttribute={setIdAttribute}
                      simpleGoodAttributes={GoodsAttributes}
                  />
                  <p>Код товара: {id}</p>
                  <ButtonBuy
                      simpleGoodsData={props.simpleGoodsData}
                      changedValueAttributes={valueAttribute}
                      changedPrice={price}
                  />
                  {
                      props.token && (
                          <ButtonFavourites
                              idAttribute={idAttribute}
                          />
                      )
                  }
              </div>
          </div>
          <div className={style.descriptionContainer}>
              <h1>Описание {goodsName}:</h1>
              <h2>{goodsFullDescription}</h2>
          </div>
      </div>
    );
};

const mapStateToProps = state => {
    const { simpleGoodsData, isFetching, error } = state.simpleGoodsReducer;
    const { token } = state.signUpReducers;

    return {
        simpleGoodsData, isFetching, error, token
    }
};

const mapDispatchToProps = dispatch => ({
    getFevouriteGoods: () => dispatch(getFavouriteGoods())
});

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