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

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

  if(component.length) {
    const place = component.find('.place-order')
    const extraAddress = component.find('.different-address')
    const extraAddressRadio = component.find('input[name="other_address"]')
    const toggleLogin = $('.toggle-login')
    let hasExtraAddress = false
    let isNewUser = true

    place.off('.click').on('click.click', () => {
      checkForm()
    })

    toggleLogin.off('.click').on('click.click', () => {
      isNewUser = !isNewUser
    })

    extraAddressRadio.off('.click').on('click.click', (e) => {
      const checked = $(e.currentTarget).val()
      hasExtraAddress = checked == 'yes'
      if(checked == 'yes') {
        extraAddress.stop().slideDown({
          start: () => { extraAddress.css({ display: "flex" }) }
        })
      } else {
        extraAddress.stop().slideUp()
      }
    })

    const checkForm = () => {
      const inputs = component.find('.input')
      const passwords = component.find('.input[type="password"]')
      let errors = 0

      inputs.each( (i,e) => {
        const input = $(e)
        const type = input.prop('type')
        const required = input.prop('required')

        if(required) {
          switch(type) {
            case 'text':
            case 'select-one':
              if(['x_address', 'x_city', 'x_zip_code', 'x_province'].indexOf(input.prop('name')) > -1) {
                if(hasExtraAddress) {
                  if(!input.val().length) {
                    input.addClass('error')
                    errors++
                  } else { input.removeClass('error') }
                }
              } else {
                if(!input.val().length) {
                  input.addClass('error')
                  errors++
                } else { input.removeClass('error') }
              }
              break;
            case 'email':
              if(!/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
                  .test(input.val())) {
                input.addClass('error')
                errors++
              } else { input.removeClass('error') }
              break;
            case 'password':
              if(!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$/
                  .test(input.val())) {
                input.addClass('error')
                errors++
              } else { input.removeClass('error') }
              break;
            case 'checkbox':
              if(!input.is(':checked')) {
                input.closest('.checkbox').addClass('error')
                errors++
              } else {
                input.closest('.checkbox').removeClass('error')
              }
              break;
          }
        }
      })

      if(passwords[0].value != passwords[1].value) {
        $(passwords[1]).addClass('error')
        errors++
      } else {
        $(passwords[1]).removeClass('error')
      }

      if(!errors) {
        let body = {}
        inputs.each( (i,e) => {
          const input = $(e)
          const type = input.prop('type')
          const name = input.prop('name')

          if(['x_address', 'x_city', 'x_zip_code', 'x_province'].indexOf(name) > -1) {
            if(hasExtraAddress) {
              body[name] = input.val()
            }
          } else {
            body[name] = input.val()
          }
        })

        placeOrder(body, isNewUser)

      }
    }

    const placeOrder = (profile, isNewUser) => {

      Apis.getCart().then( (data) => {
        const cartItems = data.cart
        let amount = 0
        let shipping = 10

        $.each(cartItems, (i,e) => {
          amount += e.price * e.qty
        })

        const cart = [{
          amount: { currency_code: 'EUR', value: amount + shipping },
          shipping: {
            address: {
              address_line_1: profile.address,
              postal_code: profile.zip_code,
              admin_area_1: profile.province,
              admin_area_2: profile.city,
              country_code: 'IT'
            }
          }
        }]

        Apis.getToken().then( (data) => {
          const token = data.access_token
          Apis.placeOrder(cart, token).then( (data) => {
            const capture = data.links.find(item => item.rel == 'capture')
            const approve = data.links.find(item => item.rel == 'approve')
            if(isNewUser) {
              Apis.addUser(profile).then( (data) => {
                console.log(data)
                window.location = approve.href
              }).catch( (error) => {
                console.error(error)
              })
            } else {
              window.location = approve.href
            }
          }).catch( (error) => {
            console.error(error)
          })
        }).catch( (error) => {
          console.error(error)
        })
      }).catch( (error) => {
        console.error(error)
      })
    }
  }
})