//= require "vendor/braintree"

SolidusBraintree = {
  getFrontendStyles: function(){
    /* Emulation of inherited attributes through an iframe */
    var $source = $('.braintree-hosted-field');
    return {
      input: {
        "font-family": $source.css("font-family"),
        "font-size": $source.css("font-size"),
        "color": $source.css("color"),
      }
    };
  }
}

Spree.routes.payment_client_token_api = Spree.pathFor("api/payment_client_token")

var braintreeDropinIntegration;
var cardSelector = "#payment-method-fields";
var confirmForm = "#checkout_form_confirm";
var paymentId;

var getClientToken = function(onSuccess) {
  return Spree.ajax({
    url: Spree.routes.payment_client_token_api,
    type: "POST",
    data: {
      payment_method_id: paymentId
    },
    error: function(xhr, status) {
      // If it fails it means the payment method was not a Braintree payment method
      if (braintreeDropinIntegration) {
        braintreeDropinIntegration.teardown();
        braintreeDropinIntegration = null;
      }
    },
    success: function(data) {
      onSuccess(data);
    }
  });
};

var initializeBraintree = function(data) {
  $("#card_expiry").on("keyup", function() {
    // We need to format the braintree expiration without spaces
    $("#braintree_expiration_date").val($(this).val().replace(/ /g,''));
  })
  braintree.setup(data.client_token, "custom", {
    id: "checkout_form_payment",
    hostedFields: {
      styles: SolidusBraintree.getFrontendStyles(),
      number: {
        selector: "#braintree_card_number",
        placeholder: braintree.placeholders["number"]
      },
      cvv: {
        selector: "#braintree_card_code",
        placeholder: braintree.placeholders["cvv"]
      },
      expirationDate: {
        selector: "#braintree_card_expiry",
        placeholder: braintree.placeholders["expirationDate"]
      }
    },
    dataCollector: {
      kount: {environment: braintree.environment},
      paypal: true
    },
    paypal: {
      container: "#braintree_paypal_container",
      onSuccess: function() {
        $(".braintree-cc-input").hide();
      },
      onCancelled: function() {
        $(".braintree-cc-input").show();
      }
    },
    onReady: function (integration) {
      braintreeDropinIntegration = integration;
      $('form').find("input#device_data").val(integration.deviceData);
    },
    onError: function(error) {
      var text;

      if (error.type === "VALIDATION") {
        text = 'There was a problem with your payment information. Please check your information and try again.';
      } else {
        text = error.message;
      }

      $('#checkout_form_payment').find(':submit, :image').attr('disabled', false).removeClass('disabled');
      var errorDiv = $("<div/>", {
        class: 'flash error',
        text: text
      });

      if (error.details) {
        var list = $("<ul/>").appendTo(errorDiv);
        $.each(error.details.invalidFieldKeys, function (idx) {
          $('<li/>', {
            text: error.details.invalidFieldKeys[idx] + " is required."
          }).appendTo(list);
        });
      }

      if ($('.flash.error').length == 0) {
        errorDiv.prependTo("#content");
      } else {
        $('.flash.error').replaceWith(errorDiv);
      }
    },
    onPaymentMethodReceived: function(obj) {
      $("#payment_method_nonce").val(obj.nonce);
      $("#checkout_form_payment").submit();
      return;
    }
  });
};

var getDeviceDataConfirm = function(data) {
  var collector = braintree.data.setup({
    kount: {environment: braintree.environment}
  });
  $('form').find("input#device_data").val(collector.deviceData);
  collector.teardown();
};

$(document).ready(function() {
  if ($(cardSelector).find("input[type=radio][name='order[payments_attributes][][payment_method_id]']").length) {
    $(cardSelector).find("input[type=radio][name='order[payments_attributes][][payment_method_id]']").on("change", function() {
      paymentId = $(this).val();
      getClientToken(initializeBraintree);
    });
    // Attempt to initialize braintree
    paymentId = $("form input[type=radio][name='order[payments_attributes][][payment_method_id]']:checked").val();
    getClientToken(initializeBraintree);
  }

  // Attempt to inject device_data to confirm form.
  if ($(confirmForm).length && braintree.environment) {
    getDeviceDataConfirm();
  }
});