import React, { Component } from 'react';
import {connect} from "react-redux";
import {Link} from "react-router-dom";
import {Switch, Route} from "react-router-dom";

import UserInfo from '../components/userInfo'
import UserOrders from '../components/userOrders'

import { getUserOrders,getOrders } from "../actions/orders"
import { changeInputValueUserUserForm } from '../actions/auth'
import {putUser} from '../actions/user'

class UserContainer extends Component {

    componentDidMount() {
        this.props.getOrders({
            doctors: this.props.doctors,
            services: this.props.services,
            users: this.props.users})
    }
    // componentDidUpdate(){
    //     if(this.props.orders.length > 0 &&) 
    //     // console.log('did update', this.props.orders)
    //      this.props.getUserOrders(this.props.currentUser)
    // }
    componentDidUpdate(prevProps) {
        if(this.props.orders.length > 0 ) 
            if(prevProps.orders !==  this.props.orders)
            this.props.getUserOrders(this.props.currentUser)
    }

    render() { 
        console.log(this.props.userOrdersArray)
        const { currentUser,changeUserUserForm, changeInputValueUserUserForm,putUser,userOrdersArray } = this.props
        return (
            <div className="main">
                <div className="info-wrap">
                <h2>Добро пожаловать в личный кабинет, {currentUser.firstName}!</h2>
                 <div className="btn-box">
                    <Link to='/user/orders' className = "btn link admin" >Мои заказы</Link>
                    <Link to='/user/info' className = "btn link admin">Редактировать профиль</Link>
                 </div>
                 <Switch>
                    <Route path='/user/orders'  render={() => <UserOrders
                           data={ userOrdersArray}
                        />} />
                    <Route path='/user/info' render={() => <UserInfo
                            user={currentUser}
                            changeUserUserForm = {changeUserUserForm}
                            changeInputValueUserUserForm={changeInputValueUserUserForm}
                            putUser= {putUser}
                        />} />
                 </Switch>
                </div>
            </div>

              );
    }
}

const mapStateToProps = state => {
    return {
        currentUser: state.auth.user,
        changeUserUserForm: state.auth.changeUserForm,
        orders: state.orders.orders,
        users:state.user.users,
        services: state.services.services,
        doctors:state.app.doctors,
        userOrdersArray: state.orders.userOrdersArray
    }
}
export default connect(mapStateToProps, { changeInputValueUserUserForm, putUser, getOrders,getUserOrders })(UserContainer);