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

const UpdateForm = ({updateImg, updateUser, id}) => {
    const history = useHistory();
    const formRef = useRef(null);
    const [nick, changeNick] = useState(null);
    const [login, changeLogin] = useState(null);
    const [password, changePassword] = useState(null);
    const [password2, changePassword2] = useState(null);
    const [isUpdateImg, changeImg] = useState(false);
    const [isUpdatePage, changePage] = useState(false);
    
    useEffect(() => isUpdatePage && window.location.reload()[isUpdatePage])
    console.log(formRef);

  return(
    <>
    <div className = "updateWrapper">
      <h4>Редагування</h4>
      <input onChange = {(e) => changeNick(e.target.value)} placeholder = "Новий нікнейм"/>
      <input onChange = {(e) => changeLogin(e.target.value)} placeholder = "Новий логін"/>
      <input onChange = {(e) => changePassword(e.target.value)} placeholder = "Новий пароль"/>
      <input onChange = {(e) => changePassword2(e.target.value)} placeholder = "Повторіть пароль"/>
      <form className = "updateImg" action="/upload" method="post" enctype="multipart/form-data" id='form' ref={formRef} 
      onChange = {
        () => {
          updateImg(formRef);
          changeImg(true);
      }}>
        <input type="file"  name="photo" id='photo'/>
      </form>
      <button onClick = {() => {
        let newUser = {}
        newUser._id = id;
        if(nick){
          newUser.nick = nick;
        }
        if(login) {
          newUser.login = login;
        } 
        if (password && password == password2) {
          newUser.password = password
        } else if (password !== password2) {
          history.push("/loginError");
          return
        }
        if(isUpdateImg) {
          newUser.avatar = {
            _id:123,
            url:"est"
          }
        }
         updateUser(newUser);
         changePage(true);
         
         
      }}>Зберегти</button>
    </div>

    {/* <img src = {`${urlUpload}/images/cbd7145dbc78ced471951c70f571f871`}/> */}
    </>
  )
}

const mapStateToProps = state => ({
  state: state,
  // data: state.promiseRed && state.promiseRed.user &&
  // state.promiseRed.user.payload && state.promiseRed.user.payload.data &&
  // state.promiseRed.user.payload.data.UserFindOne
 // basket: state.basket,
 // GoodsArr: arrFromObj(ObjFilter(state.basket, "price")),
 // order: orderArr(arrFromObj(ObjFilter(state.basket, "price"))),
 // orderDone: state.promiseRed && state.promiseRed.order && 
 // state.promiseRed.order.payload && 
 // state.promiseRed.order.payload.data.OrderUpsert
});



const mapDispatchToProps = dispatch => bindActionCreators({
 updateImg: updateImgAction,
 updateUser: actionUserUpdate,
 // onDel: actionCartDelete,
 // onClear: actionCartClear,
 // onOrder: actionOrder
}, dispatch);


const CUpdateForm = connect(mapStateToProps, mapDispatchToProps)(UpdateForm)

export default CUpdateForm;