text: import React, {Component, Fragment} from 'react'
  import {connect} from 'react-redux'
  
  import Burger from '../../components/Burger/Burger'
  import BuildControls from '../../components/Burger/BuildControls/BuildControls'
  import Modal from '../../components/UI/Modal/Modal'
  import OrderSummary from '../../components/Burger/OrderSummary/OrderSummary'
  import Spinner from '../../components/UI/Spinner/Spinner'
  import withErrorHandler from '../../hoc/withErrorHandler/withErrorHandler'
  import axios from '../../axios-orders'
  import * as actions from '../../store/actions/index'
  
  class BurgerBuilder extends Component {
      // constructor(props){
      //     super(props);
      //     this.state = {...}
      // }
  
      state = {
          purchasing: false,
          // loading: false,
          // error: false
      }
  
      componentDidMount () {
          // console.log(this.props);
          // axios.get('https://react-my-burger-85d72-default-rtdb.firebaseio.com/ingredients.json').then(respone => {
          //     this.setState({ingredients: respone.data});
          // }).catch(error => {
          //     this.setState({error: true});
          // });
          
          this.props.onInitIngredients();
      }
  
      updatePurchaseState (ingredients) {
          const sum = Object.keys( ingredients )
              .map( igKey => {
                  return ingredients[igKey];
              } )
              .reduce( ( sum, el ) => {
                  return sum + el;
              }, 0 );
          return sum > 0;
      }
  
      // addIngredientHandler = ( type ) => {
      //     const oldCount = this.state.ingredients[type];
      //     const updatedCount = oldCount + 1;
      //     const updatedIngredients = {
      //         ...this.state.ingredients
      //     };
      //     updatedIngredients[type] = updatedCount;
      //     const priceAddition = INGREDIENT_PRICES[type];
      //     const oldPrice = this.state.totalPrice;
      //     const newPrice = oldPrice + priceAddition;
      //     this.setState( { totalPrice: newPrice, ingredients: updatedIngredients } );
      //     this.updatePurchaseState(updatedIngredients);
      // }
  
      // removeIngredientHandler = ( type ) => {
      //     const oldCount = this.state.ingredients[type];
      //     if ( oldCount <= 0 ) {
      //         return;
      //     }
      //     const updatedCount = oldCount - 1;
      //     const updatedIngredients = {
      //         ...this.state.ingredients
      //     };
      //     updatedIngredients[type] = updatedCount;
      //     const priceDeduction = INGREDIENT_PRICES[type];
      //     const oldPrice = this.state.totalPrice;
      //     const newPrice = oldPrice - priceDeduction;
      //     this.setState( { totalPrice: newPrice, ingredients: updatedIngredients } );
      //     this.updatePurchaseState(updatedIngredients);
      // }
  
      purchaseHandler = () => {
          if (this.props.isAuthenticated) {
              this.setState({purchasing: true});
          } else {
              this.props.onSetAuthRedirectPath('/checkout');
              this.props.history.push('/auth');
          }
      }
  
      purchaseCancelHandler = () => {
          this.setState({purchasing: false});
      }
  
      // purchaseContinueHandler = () => {
      //     // alert('You continue!');
  
      //     const queryParams = [];
      //     for (let i in this.state.ingredients) {
      //         queryParams.push(encodeURIComponent(i) + '=' + encodeURIComponent(this.state.ingredients[i]));
      //     }
      //     queryParams.push('price=' + this.props.price);
      //     const queryString = queryParams.join('&');
      //     this.props.history.push({
      //         pathname: '/checkout',
      //         search: '?' + queryString
      //     });
      // }
  
      purchaseContinueHandler = () => {
          this.props.onInitPurchase();
          this.props.history.push('/checkout');
      }
  
      render(){
          const disabledInfo = {
              ...this.props.ing
          };
          for ( let key in disabledInfo ) {
              disabledInfo[key] = disabledInfo[key] <= 0
          }
          let burger = this.props.error ? <p>Ingredients cant't be loaded</p> : <Spinner />;
          let orderSummary = null;
          if (this.props.ing) {
              burger = (
                  <Fragment>
                      <Burger ingredients={this.props.ing}></Burger>,
                      <BuildControls
                          ingredientAdded={this.props.onIngredientsAdded}
                          ingredientRemoved={this.props.onIngredientsRemoved}
                          disabled={disabledInfo}
                          purchasable={this.updatePurchaseState(this.props.ing)}
                          price={this.props.price}
                          ordered={this.purchaseHandler}
                          isAuth={this.props.isAuthenticated} />
                  </Fragment>
                      );
                  orderSummary = <OrderSummary ingredients={this.props.ing}
                  price={this.props.price.toFixed(2)}
                  purchaseCancelled={this.purchaseCancelHandler}
                  purchaseContinued={this.purchaseContinueHandler} />;
          }
          // if (this.state.loading) {
          //     orderSummary = <Spinner />
          // }
          // {salad: true, meat: false, ...}
          return(
              <Fragment>
                  <Modal show={this.state.purchasing} modalClosed={this.purchaseCancelHandler}>
                      {orderSummary}
                  </Modal>
                  {burger}
              </Fragment>
          );
      }
  }
  
  const mapStateToProps = state => {
      return {
          ing: state.burgerBuilder.ingredients,
          price: state.burgerBuilder.totalPrice,
          error: state.burgerBuilder.error,
          isAuthenticated: state.auth.token !== null
      }
  }
  
  const mapDispatchToProps = dispatch => {
      return {
          onIngredientsAdded: (ingName) => dispatch(actions.addIngredient(ingName)),
          onIngredientsRemoved: (ingName) => dispatch(actions.removeIngredient(ingName)),
          onInitIngredients: () => dispatch(actions.initIngredients()),
          onInitPurchase: () => dispatch(actions.purchaseInit()),
          onSetAuthRedirectPath: (path) => dispatch(actions.setAuthRedirectPath(path))
      }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(withErrorHandler(BurgerBuilder, axios));