text: import React, { Component } from 'react';
  import Aux from '../../hoc/Auxiliary/Auxiliary';
  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 axios from '../../../src/axios-orders';
  import Spinner from '../../Components/UI/Spinner/Spinner';
  import withErrorHandler from '../../hoc/withErrorHandler/withErrorHandler';
  
  const INGREDIENT_PRICES = {
      salad: 0.5,
      bacon: 0.7,
      cheese: 0.4,
      meat: 1.3
  };
  
  class BurgerBuilder extends Component {
      // constructor(props){
      //     super(props);
      //     this.state = {};
      // }
  
      state = {
          ingredients: null,
          totalPrice: 0,
          purchaseable: false,
          purchasing: false,
          loading: false,
          error: null,
      }
  
      componentDidMount() {
          axios.get('https://reactburgerbuilder-8cf33.firebaseio.com/ingredients.json')
              .then(res => {
                  this.setState({ ingredients: res.data });
              })
              .catch(err => {
                  console.log(err);
                  this.setState({error:true});
              });
      }
  
      componentWillUnmount() {
          
      }
  
      updatePurchaseable(ingredients) {
          const sum = Object.keys(ingredients)
              .map(igKey => {
                  return ingredients[igKey];
              })
              .reduce((sum, el) => {
                  return sum + el;
              }, 0);
          this.setState({ purchaseable: 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({
              ingredients: updatedIngredients,
              totalPrice: newPrice
          });
  
          this.updatePurchaseable(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({
              ingredients: updatedIngredients,
              totalPrice: newPrice
          });
  
          this.updatePurchaseable(updatedIngredients);
      }
  
      purchaseHandler = () => {
          this.setState({ purchasing: true });
      }
  
      purchaseCancelHandler = () => {
          this.setState({ purchasing: false });
      }
  
      purchaseContiueHandler = () => {
          
          //routing thing
          const queryParams = [];
          for(let i in this.state.ingredients){
              console.log(encodeURIComponent(i) + "=" + encodeURIComponent(this.state.ingredients[i]));
              queryParams.push(encodeURIComponent(i) + "=" + encodeURIComponent(this.state.ingredients[i]));
          }
  
          queryParams.push("price="+this.state.totalPrice);
  
          const queryString = queryParams.join("&");
          this.props.history.push({
              pathname: '/checkout',
              search: "?"+queryString
          });
  
      }
  
  
  
      render() {
  
          const disabledInfo = {
              ...this.state.ingredients
          };
  
          for (let key in disabledInfo) {
              disabledInfo[key] = disabledInfo[key] <= 0;
          }
  
          let orderSummary = null;
          let burger = this.state.error ? <p>Ingredients can't be loaded</p> : <Spinner />;
  
          if (this.state.ingredients) {
              console.log("in BB " + JSON.stringify(this.state.ingredients));
              burger = (
                  <Aux>
                      <Burger ingredients={this.state.ingredients} />
                      <BuildControls
                          ingredientAdded={this.addIngredientHandler}
                          ingredientRemoved={this.removeIngredientHandler}
                          disabled={disabledInfo}
                          price={this.state.totalPrice}
                          purchaseable={this.state.purchaseable}
                          ordered={this.purchaseHandler}
                      />
                  </Aux>
              );
              orderSummary = <OrderSummary
                  ingredients={this.state.ingredients}
                  price={this.state.totalPrice}
                  purchaseCancelled={this.purchaseCancelHandler}
                  purchaseContiued={this.purchaseContiueHandler}
              />
              if (this.state.loading) {
                  orderSummary = <Spinner />
              }
          }
  
          return (
              <Aux>
  
                  <Modal show={this.state.purchasing} modalClosed={this.purchaseCancelHandler}>
                      {orderSummary}
                  </Modal>
  
                  {burger}
  
              </Aux>
          );
      }
  
  
  }
  
  export default withErrorHandler(BurgerBuilder, axios);