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

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

  if(component.length) {

    const details = component.find('.details')

    if(details.length) {
      const qty = details.find('.qty')
      const plus = details.find('.plus')
      const minus = details.find('.minus')
      const addToCart = component.find('.add-to-cart')
      const modal = component.find('.add-modal')
      const modalClose = modal.find('.close')

      qty.on('input', (e) => { $(e.currentTarget).val($(e.currentTarget).val().replace(/[^0-9]/g, '') || 1) })

      plus.off('.click').on('click.click', () => {
        const value = parseInt(qty.val())
        qty.val(value + 1)
      })

      minus.off('.click').on('click.click', () => {
        const value = parseInt(qty.val())
        if(value > 1) {
          qty.val(value - 1)
        }
      })


      modalClose.off('.click').on('click.click', () => {
        modal.fadeOut()
      })

      addToCart.off('.click').on('click.click', (e) => {
        const button = $(e.currentTarget)
        const pid = button.data('pid')
        const name = button.data('name')
        const price = button.data('price')

        const selectedQty = parseInt(qty.val())
        const modalImage = modal.find('.image')
        const modalName = modal.find('.name')
        const modalQty = modal.find('.qty')
        const modalTotal = modal.find('.total')

        modalImage.prop('src', `/images/products/${pid}.png`)
        modalName.text(name)
        modalQty.text(`Quantità: ${selectedQty}`)
        modalTotal.text(`Costo totale: ${new Intl.NumberFormat('en-US', { style: 'currency', currency: 'EUR'}).format( price * selectedQty)}`)

        Apis.addToCart(null, pid, selectedQty).then( (data) => {
          console.log(data)

          modal.fadeIn()
        }).catch( (error) => {
          console.error(error)
        })

      })
    }
  }

})