$(document).ready( () => {
  console.log('Load component - cart')

  const component = $('.component-cart')

  if(component.length) {
    const items = component.find('.list .item')
    const total = component.find('.total')
    const price = total.find('.price')

    items.each( (i,e) => {
      const item = $(e)
      const pid = item.data('pid')
      const partial = item.data('price')
      const remove = item.find('.remove')
      const plus = item.find('.qty-plus')
      const minus = item.find('.qty-minus')
      const input = item.find('.qty-input')
      const partialValue = item.find('.partial')

      remove.off('.click').on('click.click', () => {
        Apis.removeFromCart(pid).then( (data) => {
          if(data.cart.length) {
            const headerCart = $('.component-header .cart-cta .counter')
            if(headerCart.length) {
              headerCart.text(data.cart.length)
            }
            item.fadeOut()
            let total = 0
            $.each(data.cart, (i, e) => {
              total += parseFloat(e.price) * parseInt(e.qty)
            })
            price.text(new Intl.NumberFormat('it-IT', { style: 'currency', currency: 'EUR'}).format(total))
          } else {
            window.location = '/acquistare'
          }
        }).catch( (error) => {
          console.error(error)
        })
      })

      plus.off('.click').on('click.click', () => {
        input.val(parseInt(input.val())+1)
        Apis.updateCartQty(pid, partial, input.val()).then( (data) => {

          const item = data.cart.find(item => item.pid == pid)
          if(data.cart.length) {
            const headerCart = $('.component-header .cart-cta .counter')
            if(headerCart.length) {
              headerCart.text(data.cart.length)
            }
            let total = 0
            let part = item.price * item.qty
            $.each(data.cart, (i, e) => {
              total += parseFloat(e.price) * parseInt(e.qty)
            })
            price.text(new Intl.NumberFormat('it-IT', { style: 'currency', currency: 'EUR'}).format(total))
            partialValue.text(new Intl.NumberFormat('it-IT', { style: 'currency', currency: 'EUR'}).format(part))
          } else {
            window.location = '/acquistare'
          }
        }).catch( (error) => {
          console.error(error)
        })
      })

      minus.off('.click').on('click.click', () => {
        if(input.val() == 1) {
          remove.trigger('click')
        } else {
        input.val(parseInt(input.val())-1)
          Apis.updateCartQty(pid, partial, input.val()).then( (data) => {
            const item = data.cart.find(item => item.pid == pid)
            if(data.cart.length) {
              const headerCart = $('.component-header .cart-cta .counter')
              if(headerCart.length) {
                headerCart.text(data.cart.length)
              }
              let total = 0
              let part = item.price * item.qty
              $.each(data.cart, (i, e) => {
                total += parseFloat(e.price) * parseInt(e.qty)
              })
              price.text(new Intl.NumberFormat('it-IT', { style: 'currency', currency: 'EUR'}).format(total))
              partialValue.text(new Intl.NumberFormat('it-IT', { style: 'currency', currency: 'EUR'}).format(part))
            } else {
              window.location = '/acquistare'
            }
          }).catch( (error) => {
            console.error(error)
          })
        }
      })

    })
  }
})