'use strict';

var stripe = Stripe('pk_test_5R4XXBNNuTbbxbhAVEDMJEvs');

var couponCode = null;
var emailField = null;
var formClass = null;
var example = null;
var form = null;
var resetButton = null;
var error = null;
var errorMessage = null;

function registerElements(elements, exampleName) {
  console.log('registerElements(): registering form fields for payments');
  formClass = '.' + exampleName;
  console.log('registerElements(): the class is ' + formClass);
  example = document.querySelector(formClass);
  emailField = document.getElementById('creditCardSubscriberEmail');
  form = document.getElementById('creditCardForm');
  resetButton = example.querySelector('a.reset');
  error = document.getElementById('creditCardErrorLayer');
  errorMessage = document.getElementById('creditCardErrorMessage');

  function enableInputs() {
    Array.prototype.forEach.call(
      form.querySelectorAll(
        "input[type='text'], input[type='email'], input[type='tel']"
      ),
      function(input) {
        input.removeAttribute('disabled');
      }
    );
  }

  function disableInputs() {
    Array.prototype.forEach.call(
      form.querySelectorAll(
        "input[type='text'], input[type='email'], input[type='tel']"
      ),
      function(input) {
        input.setAttribute('disabled', 'true');
      }
    );
  }

  function triggerBrowserValidation() {
    // The only way to trigger HTML5 form validation UI is to fake a user submit
    // event.
    var submit = document.createElement('input');
    submit.type = 'submit';
    submit.style.display = 'none';
    form.appendChild(submit);
    submit.click();
    submit.remove();
  }

  if (isCreateNewAccount()) {
    emailField.addEventListener('change', function(event) {
      console.log('Checking if email is available!');
      checkIfEmailAvailable(document.getElementById(event.target.id).value);
    });
  }

  async function checkIfEmailAvailable(emailAddress) {
    var isEmailAvailableResponse = await isEmailValid(emailAddress);
    console.log('Response after checking: ' + JSON.stringify(isEmailAvailableResponse, null, 2));
    var isEmailAvailable = isEmailAvailableResponse.available;

    console.log('Is the email available? ' + isEmailAvailable);

    if (!isEmailAvailable) {
      showErrorAlert('Email already exists', 'There is already an account registered with that email address.');
    }

    return isEmailAvailable;

  }


  // Listen for errors from each Element, and show error messages in the UI.
  var savedErrors = {};
  elements.forEach(function(element, idx) {
    element.on('change', async function(event) {
   
      if (event.error) {
        error.classList.add('visible');
        savedErrors[idx] = event.error.message;
        errorMessage.innerText = event.error.message;
      } else {
        savedErrors[idx] = null;

        // Loop over the saved errors and find the first one, if any.
        var nextError = Object.keys(savedErrors)
          .sort()
          .reduce(function(maybeFoundError, key) {
            return maybeFoundError || savedErrors[key];
          }, null);

        if (nextError) {
          // Now that they've fixed the current error, show another one.
          errorMessage.innerText = nextError;
        } else {
          // The user fixed the last error; no more errors.
          error.classList.remove('visible');
        }
      }
    });
  });



  // Listen on the form's 'submit' handler...
  form.addEventListener('submit', async function(e) {
    e.preventDefault();

    // Trigger HTML5 validation UI on the form if any of the inputs fail
    // validation.
    var plainInputsValid = true;
    Array.prototype.forEach.call(form.querySelectorAll('input'), function(input) {
      if (input.checkValidity && !input.checkValidity()) {
        plainInputsValid = false;
        return;
      }
    });
    
    if (!plainInputsValid) {
      triggerBrowserValidation();
      return;
    }

    if (isCreateNewAccount()) {
      var isEmailAvailable = await checkIfEmailAvailable(document.getElementById('creditCardSubscriberEmail').value);
      if (!isEmailAvailable) {
        return;
      }
    }

    // Show a loading screen...
    example.classList.add('submitting');
    // Only showing when upgrading
    try { showLoadingAnimation() } catch(e) {};

// Disable all inputs.
    disableInputs();

    // If an upgrade additionalData is populated from the upgrade page already
    if (isCreateNewAccount()) {
        var name = form.querySelector('#creditCardSubscriberName');
        var email = form.querySelector('#creditCardSubscriberEmail');
        var phone =  phoneInstanceFields['creditCardSubscriberPhone']; //form.querySelector('#creditCardSubscriberPhone');
        // var address1 = form.querySelector('#' + exampleName + '-address');
        // var city = form.querySelector('#' + exampleName + '-city');
        // var state = form.querySelector('#' + exampleName + '-state');
        // var zip = form.querySelector('#' + exampleName + '-zip');
        additionalData = {
          name: name ? name.value : undefined,
          email: email ? email.value : undefined,
          phone: phone ? phone.getNumber().replace('+','00') : undefined,
          // address_line1: address1 ? address1.value : undefined,
          // address_city: city ? city.value : undefined,
          // address_state: state ? state.value : undefined,
          // address_zip: zip ? zip.value : undefined,
        };
    }

    console.log('Additional data is ' + JSON.stringify(additionalData, null, 2));

    // Use Stripe.js to create a token. We only need to pass in one Element
    // from the Element group in order to create a token. We can also pass
    // in the additional customer data we collected in our form.
    stripe.createToken(elements[0], additionalData).then(function(stripeInvocationResult) {
      // Stop loading!
      example.classList.remove('submitting');

      console.log('Additional data is: ' + JSON.stringify(additionalData, null, 2));

      console.log('Stripe invocation result is ' + JSON.stringify(stripeInvocationResult));

      if (stripeInvocationResult.token) {

        $('#couponInputLink').hide();

        createOrUpgradeAccount(additionalData, stripeInvocationResult);

      } else {
        // Otherwise, un-disable inputs.
        enableInputs();
        // window.parent.showErrorInSubscription();
      }
    });
  });

  // resetButton.addEventListener('click', function(e) {
  //   e.preventDefault();
  //   // Resetting the form (instead of setting the value to `''` for each input)
  //   // helps us clear webkit autofill styles.
  //   form.reset();

  //   // Clear each Element.
  //   elements.forEach(function(element) {
  //     element.clear();
  //   });

  //   // Reset error state as well.
  //   error.classList.remove('visible');

  //   // Resetting the form does not un-disable inputs, so we need to do it separately:
  //   enableInputs();
  //   example.classList.remove('submitted');
  // });
}


function subscribeUserWithStripe(additionalData, stripeTokenizedResponse) {
  return request.post('https://msdashboard-staging.herokuapp.com/subscription/stripe')
                .send('name=' + additionalData.name)
                .send('email=' + additionalData.email)
                .send('phone=' + additionalData.phone)
                .send('plan=' + (additionalData.selectedPlan ? additionalData.selectedPlan : window.parent.selectedPlan))
                .send('coupon=' + couponCode)
                .send('stripeResponse=' + JSON.stringify(stripeTokenizedResponse));
}


function showPaymentFailed() {
  Swal.fire({
    type: 'error',
    title: 'Payment failed!',
    text: 'We could not charge your card, you can try a different one.',
    footer: 'You might need to refresh the page.'
  })
  .then(clicked => {
    location.reload();
  });
}


function provisionMSAccount(additionalData, subscriptionRecord) {
  var referralInformation = null;
  var setPasswordURL = null;
  window.parent.provisionMSAccount(additionalData, subscriptionRecord)
  .then(res => {
    console.log('provisionMSAccount(): User correctly provisioned!');
    referralInformation = res.referralInfo;
    setPasswordURL = res.setPasswordURL;
  })
  .catch(err => {
    // err.message, err.response
    console.log('provisionMSAccount(): Some error happened while provisioning the account' + err);
  })
  .finally(nothing => {
    window.parent.showSuccessfulSubscription(referralInformation,setPasswordURL);
  }); 
}


function isCreateNewAccount() {
  return emailField; // If there is an email field, we asume it is not an UPGRADE, but a new account creation
}


function getUserProfileInfo() {
  var queryString = window.location.search;
  var urlParams = new URLSearchParams(queryString);
  return {
    name: urlParams.get('name'),
    email: urlParams.get('email'),
    phone: urlParams.get('phone'),
    accountId: urlParams.get('accountId'),
    location: urlParams.get('location')
  };  
}


function createOrUpgradeAccount(additionalData, stripeInvocationResult) {

  // 0) Creating new account with: 
  console.log('createOrUpgradeAccount(): ' + JSON.stringify(additionalData, null, 2));
  // 1) Subscribe user in the backend.
  subscribeUserWithStripe(additionalData, stripeInvocationResult)
  .then(successResponse => {
    // 2) Payment went through, now provisioning an MS account
    console.log('Payment went through: ' + JSON.stringify(successResponse.body));
    if (!successResponse.body.success) { // The subscription failed in Stripe
      throw 'Stripe did not allow subscribing the user.';
    }

    var subscriptionRecord = {
      subscriptionEvents: [ 
        stripeInvocationResult, 
        successResponse.body.data.customer, 
        successResponse.body.data.subscription 
      ]
    };

    subscriptionRecord['planNickname'] = successResponse.body.data.subscription.plan.nickname;
    subscriptionRecord['paymentProvider'] = 'STRIPE';
    subscriptionRecord['subscriptionID'] = successResponse.body.data.subscription.id; 
    subscriptionRecord['startDate'] = (new Date(successResponse.body.data.subscription.created * 1000)).toGMTString();
    subscriptionRecord['nextBillingDate'] = (new Date(successResponse.body.data.subscription.current_period_end * 1000)).toISOString();
    subscriptionRecord['expiryDate'] = (new Date(successResponse.body.data.subscription.current_period_end * 1000)).toUTCString();
    if (successResponse.body.data.subscription.plan.amount) {
      var priceAsString = successResponse.body.data.subscription.plan.amount + "";
      var priceWithDecimalPoint = priceAsString.slice(0, priceAsString.length - 2) + '.' + priceAsString.slice(priceAsString.length - 2, priceAsString.length);
      subscriptionRecord['price'] = priceWithDecimalPoint;
    }
    
    // console.log('==========> PROVISIONING WITH ' + JSON.stringify(subscriptionRecord, null, 2));

    if (isCreateNewAccount()) {
      console.log('createOrUpgradeAccount(): creating new account for ' + additionalData.email);
      provisionMSAccount(additionalData, subscriptionRecord);
      return;
    }  
    
    console.log('createOrUpgradeAccount(): upgrading exiting account ' + additionalData.email);
    upgradeMSAccount(subscriptionRecord);

  })
  .catch(failureResponse => {
    // 3) Payment failed, ask user to retry with a different card
    console.log('Payment failed, details are: ' + failureResponse.stack);
    showPaymentFailed();
  });
  
  example.classList.add('submitted');

}