---
import { t } from '../lib/content';
import T from './content/T.astro';
interface Props { variant?: 'full' | 'footer' }
const { variant = 'full' } = Astro.props;
---
<form
  class:list={['cform', `cform--${variant}`]}
  method="post"
  action="/api/contact"
  novalidate
  data-msg-success={t('form.msg.success')}
  data-msg-error-generic={t('form.msg.error-generic')}
  data-msg-error-network={t('form.msg.error-network')}
>
  <input class="field" name="firstName" placeholder={t('form.field.first-name')} required maxlength="100" />
  <input class="field" name="lastName" placeholder={t('form.field.last-name')} required maxlength="100" />
  <input class="field" type="tel" name="phone" placeholder={t('form.field.phone')} required maxlength="40" />
  <input class="field" type="email" name="email" placeholder={t('form.field.email')} required maxlength="200" />
  <textarea class="field" name="message" placeholder={t('form.field.message')} required maxlength="5000"></textarea>
  <input class="hp" type="text" name="hp_field" tabindex="-1" autocomplete="off" aria-hidden="true" />
  <button class="btn" type="submit"><T tag="form.submit" as="span" /></button>
  <p class="cform__privacy">Inviando il modulo dichiari di aver letto l'<a href="/privacy">informativa sulla privacy</a>.</p>
  <p class="form-msg" hidden></p>
</form>

<style>
  .cform__privacy { font-size: .74rem; opacity: .8; margin: 8px 0 0; line-height: 1.5; }
  .cform__privacy a { text-decoration: underline; }
</style>

<script>
  document.querySelectorAll<HTMLFormElement>('.cform').forEach((form) => {
    form.addEventListener('submit', async (e) => {
      e.preventDefault();
      const msg = form.querySelector<HTMLParagraphElement>('.form-msg')!;
      const btn = form.querySelector<HTMLButtonElement>('button')!;
      btn.disabled = true;
      msg.hidden = true;
      try {
        const res = await fetch('/api/contact', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(Object.fromEntries(new FormData(form))),
        });
        const data = await res.json();
        msg.textContent = res.ok ? form.dataset.msgSuccess! : (data.error ?? form.dataset.msgErrorGeneric);
        msg.className = `form-msg ${res.ok ? 'form-msg--ok' : 'form-msg--err'}`;
        if (res.ok) form.reset();
      } catch {
        msg.textContent = form.dataset.msgErrorNetwork!;
        msg.className = 'form-msg form-msg--err';
      }
      msg.hidden = false;
      btn.disabled = false;
    });
  });
</script>