import { connect } from "react-redux";
import {gql, urlUpload, actionPromise, actionGoodCard, getGoods, actionCartAdd} from "../reducers";
import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
import { useEffect, useState } from 'react';
import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from 'react-router-dom';





  const mapStateToProps = state => ({
    state: state,
    basket: state.basket,
    goodCard: getGoods(state, "goodCard", "GoodFindOne")
  });
  
  const mapDispatchToProps = dispatch => bindActionCreators({
    getData: actionGoodCard,
    onAdd: actionCartAdd

  }, dispatch);
  






  const GoodCard = ({id, goodCard = null, state, onAdd, getData, className = "goodCard"}) => {
    const history = useHistory();
    useEffect(() =>  getData(id), [id]);
    //console.log(state)


    const [width, setWidth] = useState(window.innerWidth);
    const [startWidth, setStartwidth] = useState(true);
    const [finallyWidth, setFinallyWidth] = useState(true);

    useEffect(() => startWidth !== finallyWidth && window.location.reload(), [startWidth, finallyWidth])


    window.onresize = () => {

      width > 900 ? setStartwidth(true) : setStartwidth(false);

      setWidth(window.innerWidth);

      width > 900 ? setFinallyWidth(true) : setFinallyWidth(false);

      }
      console.log(goodCard)

     return(
        <> 
        { goodCard &&
          <div className = {className}>
            <h2>{goodCard.name}</h2>
            <img src = {goodCard.images ? `${urlUpload}/${goodCard.images[0].url}`: `https://images.ua.prom.st/2259265311_korobka-syurpriz-dlya.jpg`}/>
            <span>{`${goodCard.price}грн`}</span>
            <p>{goodCard.description}</p>
            <button onClick = {() => onAdd(goodCard.name, goodCard.price, goodCard._id,  goodCard.description, goodCard.images)}>В кошик</button>
          </div>
        }
        </>
    )
  }
  


  const CGoodCard = connect(mapStateToProps, mapDispatchToProps)(GoodCard)

  export default CGoodCard;