import { actionOrdersFind, actionOrderUpdate, actionOrderClear, actionOrderAddOne, actionOrderFindOne, urlUpload, actionOrderDelete} from "../reducers";
import { connect } from "react-redux";
import {OneGood, GoodsNotFound} from "./index";
import { useEffect, useState, useRef } from "react";
import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from 'react-router-dom';
import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';



const OrderUpdate = ({orderFind, orderUpdated, orderUpdate, onAddOne, orderClear, onDelete, orderObj, goodsArr, orderId, state, match:{params:{_id}}}) => {
    //const [orderData, findOrder] = useState(_id);
    //useEffect(() => orderFind(orderData), [])
    const history = useHistory();
    console.log(state)
    console.log(orderId)
    // useEffect(() => )
    

    return (
        <div className = "orderUpdateWrapper">
            <div className = "goods">
                {goodsArr.length > 0 ? goodsArr.map((good) => 
                    
                    <div className = "oneGood">
                        <OneGood id = {good._id}  name = {good.good.name} price = {good.price} 
                        image = {good.good.images ? `${urlUpload}/${good.good.images[0].url}` : `https://images.ua.prom.st/2259265311_korobka-syurpriz-dlya.jpg`}
                        
                    />
                            <div className = "basketButoons">
                            <button 
                            onClick = {() => onAddOne(good.good._id)}
                                >+</button> 
                            <h4>{good.count}</h4>    
                            <button 
                            onClick = {() =>  { 

                                onDelete(good.good._id)}}
                                >-</button>   
                        </div> 
                    </div>
                ) : 
                <h4>В замовленні немає товарів</h4>
                } 
            </div>
            <h4>{orderObj.total}грн</h4>
            <div className = "orderUpdateBottom">
                <button onClick = {() => orderClear()}>Скасувати замовлення</button>
                <button onClick = {async () =>  {
                    // await orderFind(orderId)
                    await orderUpdate(orderId, arrForUpdate(goodsArr));
                    let ownerId = orderObj.owner;
                    await orderClear();
                    history.push("/user/"+ownerId)
                }} >Зберегти змінення</button>
            </div>
        </div>
    )
}

function arrForUpdate(arr) {
    var newArr = [];
    for(let key of arr) {
        let oneObj = {};
        oneObj.count = key.count;
        oneObj.good = {};
        oneObj.good._id = key.good._id;
        newArr.push(oneObj)
    }
    return newArr;
}

function arrFromObj(obj) {
    
    var newArr = [];
    for (let key in obj) {
            newArr.push(obj[key])
    }
    return newArr;
}


const mapStateToProps = state => ({
    state: state,

    order: state.promiseRed && state.promiseRed.oneOrder &&
    state.promiseRed.oneOrder.payload && state.promiseRed.oneOrder.payload.data &&
    state.promiseRed.oneOrder.payload.data.OrderFindOne,

    orderUpdated: state.promiseRed && state.promiseRed.orderUpdated &&
    state.promiseRed.orderUpdated.payload && state.promiseRed.orderUpdated.payload.data &&
    state.promiseRed.orderUpdated.payload.data.OrderUpsert,
    
    orderObj: state.orderUpdateReducer,

    goodsArr: arrFromObj(state.orderUpdateReducer.goods),
    
    orderId: state.orderUpdateReducer.id
 });


 
 const mapDispatchToProps = dispatch => bindActionCreators({
    onDelete: actionOrderDelete,
    onAddOne: actionOrderAddOne,
    orderFind: actionOrderFindOne,
    orderClear: actionOrderClear,
    orderUpdate: actionOrderUpdate
 }, dispatch);


 const COrderUpdate = connect(mapStateToProps, mapDispatchToProps)(OrderUpdate);


 export default COrderUpdate;

