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





  const mapStateToProps = state => ({
    state: state,
    basket: state.basket,
    isAdmin: state.auth && state.auth.payload && state.auth.payload.sub && state.auth.payload.sub.acl && state.auth.payload.sub.acl.indexOf("admin") > -1,
    goodCard: getData(state, "goodCard", "GoodFindOne"),
    newPictureStatus: state.promiseRed && state.promiseRed.photo &&
    state.promiseRed.photo.status,
    newImg: state.promiseRed && state.promiseRed.photo &&
    state.promiseRed.photo.payload && state.promiseRed.photo.payload,
    updateStatus: state.promiseRed && state.promiseRed.newGood &&
    state.promiseRed.newGood.status,
  });
  
  const mapDispatchToProps = dispatch => bindActionCreators({
    getGood: actionGoodCard,
    onAdd: actionCartAdd,
    updateImg: updateImgAction,
    goodUpdate: actionGoodUpdate
  }, dispatch);
  






  const GoodCard = ({id, updateStatus = {}, newPictureStatus = {}, newImg, goodUpdate, goodCard = null, updateImg, getGood, state, onAdd, getData, className = "goodCard", isAdmin}) => {
    const history = useHistory();
    useEffect(() =>  getGood(id), [id]);

    useEffect(() => updateStatus == "RESOLVED" && window.location.reload(), [updateStatus])



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


    const [isUpdateImg, changeImg] = useState(false);
    const [showUpdate, onShow] = useState(false);
    const [description, changeDescription] = useState(null);
    const [price, changePrice] = useState(null);
    const [name, changeName] = useState(null);

    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>
            {isAdmin && <button onClick = {() => onShow(!showUpdate)}>Редагувати</button>}
              
            {showUpdate && 
            <div className = "updateWrapper">
              <input onChange = {(e) => changeName(e.target.value)} placeholder = "Змінити назву"/>
              <textarea  onChange = {(e) => changeDescription(e.target.value)} placeholder = "Змінити опис товару"/>
              <input onChange = {(e) => changePrice(e.target.value)} type = "number" placeholder = "Змінити Ціну"/>
              <input type="file"  name="photo" id='photo' 
                  onChange={(ev) => {
                    updateImg(ev.target.files[0])
                
                    changeImg(true);
                  }
                  }/>
              <button disabled = {newPictureStatus == "PENDING"}
                onClick = {
                  () => {
                    let newGood = {};
                    newGood._id = goodCard._id;
                    if (name) {
                      newGood.name = name;
                    }
                    if (description) {
                      newGood.description = description;
                    }
                    if (price) {
                      newGood.price = +price;
                    }
                    if(isUpdateImg) {
                      newGood.images = [];

                      newGood.images[0] = {

                         _id: newImg._id
                      }


                    }
                    goodUpdate(newGood);


                  }
                }
              >
                
                Зберегти

              </button>
            </div>
          }
          </div>
        }

        </>
    )
  }
  


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

  export default CGoodCard;



