context = window
MIX_MODES = context.JK.MIX_MODES

@ShoppingCartContents = React.createClass({

  mixins: [Reflux.listenTo(@AppStore, "onAppInit"), Reflux.listenTo(@UserStore, "onUserChanged")]

  render: () ->

    carts = []

    if this.props.carts?
      if this.props.carts.length == 0
        carts = `<div className="no-cart-items">You have nothing in your cart</div>`
      else
        taxRate = 0
        if this.props.tax
          taxRate = 0.0825

        estimatedTax = 0
        estimatedTotal = 0

        for cart in this.props.carts
          cart_quantity = cart.product_info.quantity - cart.product_info.marked_for_redeem
          estimatedTax += cart.product_info.price * cart_quantity * taxRate
          estimatedTotal += cart.product_info.price * cart_quantity

        estimatedTax = Math.round(estimatedTax * 100) / 100
        estimatedTotal = Math.round((estimatedTotal + estimatedTax) * 100) / 100

        for cart in this.props.carts
          console.log("CART", cart)
          freeNotice = null
          if cart.product_info.free
            freeNotice = `<span className="first-one-free">| (first one free)</span>`
          carts.push(`<div className="cart-item" key={cart.id}>
            <div className="cart-item-caption">
              <span>{cart.product_info.sale_display}</span>
              {freeNotice}
            </div>
            <div className="cart-item-price">
                $ {Number(cart.product_info.real_price).toFixed(2)}
            </div>
            <div className="cart-item-quantity">
              {cart.quantity}
            </div>
            <div className="clearall"/>
          </div>`)

        carts.push(`<div className="cart-item tax-total" key={'tax'}>
          <div className="cart-item-caption">
            <span>Tax</span>
          </div>
          <div className="cart-item-price">
            $ {estimatedTax.toFixed(2)}
          </div>
          <div className="cart-item-quantity">

          </div>
          <div className="clearall"/>
        </div>`)

        carts.push(`<div className="cart-item total" key={'total'}>
          <div className="cart-item-caption">
            <span>Total</span>
          </div>
          <div className="cart-item-price">
            $ {estimatedTotal.toFixed(2)}
          </div>
          <div className="cart-item-quantity">

          </div>
          <div className="clearall"/>
        </div>`)
    else
      carts = `<div className="loading-indicator">Loading...</div>`

    `<div className="shopping-cart-contents">
      <div className="order-items-page">
        <div className="cart-items">
          <div className="cart-item-caption">
            <span>YOUR ORDER INCLUDES:</span>
          </div>
          <div className="cart-item-price">
            <span>PRICE</span>
          </div>
          <div className="cart-item-quantity">
            <span>QUANTITY</span>
          </div>
          <div className="clearall"></div>
          {carts}
          <div className="clearall"></div>
        </div>
      </div>
    </div>`

  onAppInit: (@app) ->
    @EVENTS = context.JK.EVENTS
    @rest = context.JK.Rest()
    @logger = context.JK.logger


  onUserChanged: (userState) ->
    @user = userState?.user

})