import './style.css';

const form = document.querySelector<HTMLFormElement>('#contact-form');
const status = document.querySelector<HTMLElement>('#form-status');
const submitButton = form?.querySelector<HTMLButtonElement>('button[type="submit"]');

form?.addEventListener('submit', async (event) => {
  event.preventDefault();
  if (!form || !status || !submitButton) return;

  submitButton.disabled = true;
  submitButton.querySelector('span')!.textContent = 'GÖNDERİLİYOR';
  status.textContent = '';
  status.classList.remove('is-error', 'is-success');

  const fields = Object.fromEntries(new FormData(form).entries());

  try {
    const response = await fetch('https://formsubmit.co/ajax/amasyayildiznakliyat@gmail.com', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
      },
      body: JSON.stringify({
        ...fields,
        _subject: 'Amasya Yıldız Lojistik | Yeni iletişim talebi',
        _template: 'table',
      }),
    });

    const result = await response.json() as { success?: string | boolean };
    if (!response.ok || result.success === false || result.success === 'false') {
      throw new Error('İleti gönderilemedi.');
    }

    form.reset();
    status.textContent = 'Mesajınız alındı. Ekibimiz en kısa sürede sizinle iletişime geçecek.';
    status.classList.add('is-success');
  } catch {
    status.textContent = 'Mesajınız gönderilemedi. Lütfen daha sonra tekrar deneyin veya e-posta adresimizden bize ulaşın.';
    status.classList.add('is-error');
  } finally {
    submitButton.disabled = false;
    submitButton.querySelector('span')!.textContent = 'MESAJI GÖNDER';
  }
});