import { triggerZapier } from './call-zapier-webhook';
import { SELECTORS } from './utils/selectors';

window.Webflow ||= [];
window.Webflow.push(() => {
  const collectionElement = document.querySelector(SELECTORS.collection) as HTMLDivElement;
  const formElement = document.querySelector(SELECTORS.form) as HTMLFormElement;

  if (!collectionElement || !formElement) return;

  formElement.addEventListener('submit', async (event) => {
    event.preventDefault(); // Prevent default form submission

    const speakers = collectionElement.querySelectorAll(
      SELECTORS['speaker-name']
    ) as NodeListOf<HTMLDivElement>;
    const userEmail = formElement.querySelector(SELECTORS['user-email']) as HTMLInputElement;

    if (!speakers.length || !userEmail) return;

    // get an array of speaker names
    const speakerNames = Array.from(speakers).map((speaker) => speaker.textContent);

    // Collect email value
    const email = userEmail.value;

    // Prepare data to send
    const data: { email: string; speakers: (string | null)[] } = {
      email: email,
      speakers: speakerNames,
    };

    await triggerZapier(data);
  });
});