/*
 * This file controls the interactions and life-cycles of the page feedback
 * buttons and modal.
 */

import $ from 'jquery';
import { hostname, path, product, protocol, version } from './page-context.js';
import { toggleModal } from './modals.js';

// Hijack form submission and send feedback data to be stored.
// Called by onSubmit in each feedback form.
function submitFeedbackForm(formID) {
  // Collect form data, structure as an object, and remove fname honeypot
  const formData = new FormData(document.forms[formID]);
  const formDataObj = Object.fromEntries(formData.entries());
  const { ...feedbackData } = formDataObj;

  // Build lp fields from form data
  let fields = '';
  for (let key in feedbackData) {
    // Strip out newlines and escape double quotes if the field key is "feedback"
    if (key == 'feedback-text') {
      fields +=
        key +
        '="' +
        feedbackData[key]
          .replace(/(\r\n|\n+|\r+)/gm, ' ')
          .replace(/(\")/gm, '\\"') +
        '",';
    } else {
      fields += key + '=' + feedbackData[key] + ',';
    }
  }
  fields = fields.substring(0, fields.length - 1);

  // Build lp using page data and the fields string
  const lp = `feedback,host=${hostname},path=${path},product=${product},version=${version} ${fields}`;

  // Use a honeypot form field to detect a bot
  // If the value of the honeypot field is greater than 0, the submitter is a bot
  function isBot() {
    const honeypot = formData.get('fname');
    return honeypot.length > 0;
  }

  // If the submitter is not a bot, send the feedback data
  if (!isBot()) {
    const xhr = new XMLHttpRequest();
    xhr.open(
      'POST',
      'https://j32dswat7l.execute-api.us-east-1.amazonaws.com/prod'
    );
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhr.setRequestHeader(
      'Access-Control-Allow-Origin',
      `${protocol}//${location.host}`
    );
    xhr.setRequestHeader('Content-Type', 'text/plain; charset=utf-8');
    xhr.setRequestHeader('Accept', 'application/json');
    xhr.send(lp);
  }

  return false;
}

/////////////////////////////// Click life-cycles //////////////////////////////

// Trigger the lifecycle of page feedback (yes/no) radio select buttons
function submitLifeCycle() {
  $('.helpful .loader-wrapper').fadeIn(200);
  $('.helpful #thank-you').delay(800).fadeIn(200);
  $('.helpful .loader-wrapper').delay(1000).hide(0);
}

// Submit the feedback form and close the feedback modal window.
// Called by onclick in the page-feedback modal submit button.
function submitLifeCycleAndClose() {
  submitFeedbackForm('pagefeedbacktext');
  $('.modal #page-feedback .loader-wrapper')
    .css('display', 'flex')
    .hide()
    .fadeIn(200);
  $('.modal #page-feedback #thank-you')
    .css('display', 'flex')
    .hide()
    .delay(800)
    .fadeIn(200);
  $('.modal #page-feedback textarea').css('box-shadow', 'none');
  $('.modal #page-feedback .loader-wrapper').delay(1000).hide(0);
  setTimeout(function () {
    toggleModal();
  }, 1800);
  return false;
}

function initialize() {
  //////////////////////////////// Event triggers ////////////////////////////////

  // Submit page feedback (yes/no) on radio select and trigger life cycle
  $('#pagefeedback input[type=radio]').change(function () {
    $('form#pagefeedback').submit();
    submitLifeCycle();
  });

  // Toggle the feedback modal when user selects that the page is not helpful
  $('#pagefeedback #not-helpful input[type=radio]').click(function () {
    setTimeout(function () {
      toggleModal('#page-feedback');
    }, 400);
  });

  // Toggle the feedback modal when user selects that the page is not helpful
  $('.modal #no-thanks').click(function () {
    toggleModal();
  });
}

export { initialize };