import randomLetterInfo from './data.js';
// Thanks for the review! Would appreciate any feedback on how I organized this JS

// The key is set like this for deployment reasons bc Github will autodetect and disable my key if I leave it as it is, so I lightly scrambled it to trick Github. I do have a $3 limit set on this so its not a big deal if stolen
const secretKey =
  'stuff here to do,s,k,-,w,X,a,p,E,k,f,1,8,7,t,c,Y,o,E,e,C,F,f,d,T,3,B,l,b,k,F,J,N,X,5,F,l,3,v,E,7,m,6,e,4,7,A,b,r,x,6,p,no stuff here to do!';

// DOM ELEMENTS
const wordCountEl = document.getElementById('word-count');
const modal = document.getElementById('modal');

// input elements
const giverInput = document.getElementById('giver');
const receiverInput = document.getElementById('receiver');
const notesInput = document.getElementById('notes');
const lengthInput = document.getElementById('length');

// buttons
const generateBtn = document.getElementById('generate-btn');
const randomFillBtn = document.getElementById('random-fill-btn');
const clearFormBtn = document.getElementById('clear-form-btn');


// EVENT LISTENERS
// document.addEventListener("click", function(event){
//     if (event.target.id === "generate-btn"){
//         console.log("generate button clicked")
//     }
// })

generateBtn.addEventListener('click', (event) => {
  // check if giverInput and receiverInput fields are empty else...
  btnAction(event);
});

// Update word count as user moves the slider
lengthInput.addEventListener('input', function () {
  wordCountEl.innerHTML = this.value;
});

// Btn to fill out form with random data
randomFillBtn.addEventListener('click', () => {
  const info = getRandomLetterInfo();
  const { giver, receiver, notes } = info;
  giverInput.value = giver;
  receiverInput.value = receiver;
  notesInput.value = notes;
  lengthInput.value = 85;
  wordCountEl.innerText = 85;
});

// Question: is there a better way to clear the form? I tried to use the FormData object with clear() and reset() but it was not working
clearFormBtn.addEventListener('click', () => {
  // giverInput.value = '';
  // receiverInput.value = '';
  // notesInput.value = '';
  // lengthInput.value = 85;
  // wordCountEl.innerText = 85;
  document.getElementById("form").reset()
});

function btnAction(event) {
  event.preventDefault();
  fetch('https://api.openai.com/v1/completions', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${secretKey.split(',').slice(1, -1).join('')}`,
      'Content-Type': 'application/json',
    },
    // Info I'm passing to the AI such as the prompt, length, model etc.
    body: JSON.stringify({
      prompt: getPrompt(
        lengthInput.value,
        giverInput.value,
        receiverInput.value,
        notesInput.value
      ),
      max_tokens: 300,
      model: 'text-davinci-003',
    }),
  })
    .then((request) => request.json())
    .then((data) => {
      renderModal(modal, data);
    });
  // This part has to come after the modal is rendered bc the modal is not rendered until the promise is resolved
  modal.style.display = 'block';
}

function renderModal(modalElement, data) {
  const deleteModalBtnHtml = `<button type="button" class="close-modal-btn" id="close-modal">Close</button>`;
  modal.innerHTML = data.choices[0].text + deleteModalBtnHtml;

  // For deleting the modal
  const deleteModalBtn = document.getElementById('close-modal');
  deleteModalBtn.addEventListener('click', () => {
    modal.style.display = 'none';
    resetModalHtml();
  });
}

// Prompt for the AI
function getPrompt(length, giver, receiver, notes) {
  return `
    Write a love letter exactly ${length} words long addressed from ${giver} to ${receiver}. Output must be in HTML paragraph elements.
    Additional requirements/notes:
    ${notes}
  `;
}

function resetModalHtml() {
  modal.innerHTML = `
    <h3>Your unique love letter is generating  <i class="fas fa-spinner fa-pulse"></i></h3>
    <p id="love-letter-content"></p>
  `;
}

// Get random letter info from data.js
function getRandomLetterInfo() {
  const len = randomLetterInfo.length;
  const randomIndex = Math.floor(Math.random() * len);
  return randomLetterInfo[randomIndex];
}

/* Updates */
const formEl = document.getElementById("form")
formEl.addEventListener('submit', (e) => {
  // on form submission, prevent default
  e.preventDefault();

  // construct a FormData object, which fires the formdata event
  const formData = new FormData(formEl)
  for (const pair of formData.entries()) {
    console.log(`${pair[0]}, ${pair[1]}`);
  }
});