import { connect } from "react-redux";
import {gql, urlUpload, actionPromise} 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 actionGoodCard = (_id) => {
    const queryJson = JSON.stringify([{
        "_id": `${_id}`
      }]);
    return (actionPromise(`goodCard`, gql (
        `query oneGood($query: String) {
            GoodFindOne(query: $query) {
                _id
                createdAt
                name
                description
                price
                images{url}
            }
          }
    ` ,{ query: queryJson})))
  }


  const mapStateToProps = state => ({
    state: state,
    goodCard: getGood(state, "goodCard")
  });
  
  const mapDispatchToProps = dispatch => bindActionCreators({
    getData: actionGoodCard
  }, dispatch);
  


  const getGood = (state, key) => {
  
    if(state.promiseRed[key] && state.promiseRed[key].payload) {
        return state.promiseRed[key].payload.data.GoodFindOne
    }
  
    return null;
  };




  const GoodCard = ({id, goodCard = null, getData, className = "goodCard"}) => {
    const history = useHistory();
    useEffect(() =>  getData(id), [id]);



    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);

      // startWidth !== finallyWidth &&  history.push("./catalog")


      }


     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>
          </div>
        }
        </>
    )
  }
  


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

  export default CGoodCard;