$(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"]')
    let hasExtraAddress = false

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

    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()
          }
        })

        Apis.placeCart(body).then( (data) => {
          const headerCart = $('.component-header .cart-cta .counter')
          if(headerCart.length) {
            headerCart.text(0)
          }
        }).catch( (error) => {
          console.error(error)
        })

      }
    }
  }
})