text: import React from 'react'
  import {connect} from 'react-redux';
  
  import Auxi from '../../hoc/Auxi';
  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 '../../axios-orders';
  import Spinner from '../../components/UI/Spinner/Spinner';
  import withErrorHandler from '../../hoc/withErrorHandler/withErrorHandler';
  import * as actions from '../../store/actions/indexactions';
  
  
  // const INGREDIENT_PRICES = {
  //     salad: 10,
  //     cheese: 15,
  //     aloo_tiki: 30,
  //     bacon: 20
  // }
  
  class BurgerBuilder extends React.Component {
      constructor() {
          super();
          this.state = {
              // ingredients: null,
              // totalPrice: 20,
              // purchasable: false,
              // loading: false,
              // error: false
              purchasing: false,
          }
          // this.addIngredientHandler = this.addIngredientHandler.bind(this)
          // this.removeIngredientHandler = this.removeIngredientHandler.bind(this)
          this.purchaseHandler = this.purchaseHandler.bind(this)
          // this.purchaseCancelHandler = this.purchaseCancelHandler.bind(this)
          // this.updatePurshaseState = this.updatePurshaseState.bind(this)
      }
  
      componentDidMount() {
          this.props.onInitIngredients()
          
      }
  
      updatePurshaseState(incredients) {
  
          const sum = Object.keys(incredients)
              .map(igKey => {
                  return incredients[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.updatePurshaseState(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.updatePurshaseState(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 continued!!')
          
          // const queryParams = []
          // for(let i in this.state.ingredients) {
          //     queryParams.push(encodeURIComponent(i) + '=' + encodeURIComponent(this.state.ingredients[i]))
          // }
          // queryParams.push('price=' + this.state.totalPrice)
          // const queryString = queryParams.join('&')
  
          this.props.onInitPurchase()
          this.props.history.push({
              pathname: '/checkout',
              // search: '?' + queryString
          })
      }
  
      render() {
          const disabledInfo = {
              ...this.props.ings
          }
          for (let key in disabledInfo) {
              disabledInfo[key] = disabledInfo[key] <= 0
          }
  
          let orderSummary = null
          let burger = this.props.error ? <p>Ingredients cannot be loaded!</p> : <Spinner />
  
          if (this.props.ings) {
              burger = (
                  <Auxi>
                      <Burger ingredients={this.props.ings} />
                      <BuildControls
                          ingredientAdded={this.props.onIngredientAdded}
                          ingredientRemoved={this.props.onIngredientRemoved}
                          disabled={disabledInfo}
                          purchasable={this.updatePurshaseState(this.props.ings)}
                          ordered={this.purchaseHandler}
                          isAuth={this.props.isAuthenticated}
                          price={this.props.price} />
                  </Auxi>
  
              )
              orderSummary = <OrderSummary
                  ingredients={this.props.ings}
                  click={this.purchaseCancelHandler}
                  continue={this.purchaseContinueHandler}
                  price={this.props.price} />
          }
          // if (this.state.loading) {
          //     orderSummary = <Spinner />
          // }
  
  
          return (
              <Auxi>
                  <Modal show={this.state.purchasing}
                      modalClosed={this.purchaseCancelHandler}>
                      {orderSummary}
                  </Modal>
                  {burger}
  
              </Auxi>
          )
      }
  }
  
  const mapStateToProps = state => {
      return{
          ings: state.burgerBuilder.ingredients,
          price: state.burgerBuilder.totalPrice,
          error: state.burgerBuilder.error,
          isAuthenticated: state.auth.token !== null
      }
  }
  
  const mapDispatchToProps = dispatch => {
      return{
          onIngredientAdded: (ingName) => dispatch(actions.addIngredient(ingName)),
          onIngredientRemoved: (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))