text: import React, { Component } from "react";
  
  import Aux from '../../hoc/Aux';
  import Burger from '../../components/Burger/Burger';
  import BuildConstrols from '../../components/Burger/BuildControls/BuildControls';
  import Modal from '../../components/UI/Modal/Modal';
  import OrderSummary from '../../components/Burger/OrderSummary/OrderSummary';
  
  const INGREDIENT_PRICES = {
      salad: 0.5,
      cheese: 0.4,
      meat: 1.4,
      bacon: 0.7
  }
  
  class BurgerBuilder extends Component {
      // constructor(props) {
      //     super(props);
      //     this.state = {...}
      // }
      
      state = {
          ingredients: {
              salad: 0,
              bacon: 0,
              cheese: 0,
              meat: 0
          },
          totalPrice: 4,
          purchasable: false,
          purchasing: false
      }
  
      updatePuchaseState(ingredients) {
          const sum = Object.keys(ingredients).map(igKey => {
              return ingredients[igKey];
          })
          .reduce((sum, el) => {
              return sum + el;
          }, 0);
  
          this.setState({purchasable: sum > 0});
      }
  
      addIngredientsHandler = (type) => {
          const oldCounts = this.state.ingredients[type];
          const updatedCounted = oldCounts + 1;
          
          const updatedIngredients = {
              ...this.state.ingredients
          };
          
          updatedIngredients[type] = updatedCounted;
  
          const priceAddition = INGREDIENT_PRICES[type];
          const oldPrice = this.state.totalPrice;
          const newPrice = oldPrice + priceAddition;
          this.setState({totalPrice: newPrice, ingredients: updatedIngredients});
          this.updatePuchaseState(updatedIngredients);
      }
  
      removeIngredientHandler = (type) => {
          const oldCounts = this.state.ingredients[type];
          
          if (oldCounts <= 0) {
              return;
          }
          
          const updatedCounted = oldCounts - 1;
          
          const updatedIngredients = {
              ...this.state.ingredients
          };
          
          updatedIngredients[type] = updatedCounted;
  
          const priceDeduction = INGREDIENT_PRICES[type];
          const oldPrice = this.state.totalPrice;
          const newPrice = oldPrice - priceDeduction;
          this.setState({totalPrice: newPrice, ingredients: updatedIngredients});
          this.updatePuchaseState(updatedIngredients);
      }
  
      purchaseHandler = () => {
          this.setState({purchasing: true});
      }
  
      purchaseCancelHandler = () => {
          this.setState({purchasing: false});
      }
  
      purchaseContinueHandler = () => {
          alert('You Continue!');
      }
  
      render () {
          const disabledInfo = {
              ...this.state.ingredients
          };
  
          for(let key in disabledInfo) {
              disabledInfo[key] = disabledInfo[key] <= 0;
          }
  
          return (
              <Aux>
                  <Modal show={this.state.purchasing} modalClosed={this.purchaseCancelHandler}> 
                      <OrderSummary 
                          ingredients={this.state.ingredients} 
                          price={this.state.totalPrice}
                          purchaseCanceled={this.purchaseCancelHandler}
                          purchaseContinued={this.purchaseContinueHandler}/>
                  </Modal>
                  <Burger ingredients={this.state.ingredients} />
                  <BuildConstrols 
                      ingredientAdded={this.addIngredientsHandler} 
                      ingredientRemoved={this.removeIngredientHandler}
                      disabled={disabledInfo}
                      purchasable={this.state.purchasable}
                      ordered={this.purchaseHandler}
                      price={this.state.totalPrice}/>
              </Aux>
          );
      }
  }
  
  export default BurgerBuilder;