/* global React, useLang */
const { useMemo, useCallback } = React;
// ============ Contact us ============
// Destino del POST: window.FORSVAR_CONTACT_FORM_ENDPOINT en contact-config.js

function contactPostUrl() {
  const u = typeof window !== "undefined" ? window.FORSVAR_CONTACT_FORM_ENDPOINT : "";
  return typeof u === "string" ? u.trim() : "";
}

function ContactPage() {
  const { t, lang } = useLang();
  const segments = useMemo(() => [
    { type: "underline", value: t("contact.typ.u") },
    { type: "text", value: t("contact.typ.t") }
  ], [lang, t]);

  const setContactFieldMessage = useCallback((ev) => {
    const el = ev.target;
    if (el.validity.valueMissing) {
      el.setCustomValidity(t("contact.val.missing"));
    } else if (el.type === "email" && el.validity.typeMismatch) {
      el.setCustomValidity(t("contact.val.email"));
    } else {
      el.setCustomValidity("");
    }
  }, [t]);

  const clearContactFieldMessage = useCallback((ev) => {
    ev.target.setCustomValidity("");
  }, []);

  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [submitError, setSubmitError] = React.useState("");

  const onSubmit = async (e) => {
    e.preventDefault();
    setSubmitError("");
    const url = contactPostUrl();
    if (!url) {
      setSubmitError(t("contact.err.config"));
      return;
    }
    const form = e.currentTarget;
    setSubmitting(true);
    try {
      const fd = new FormData(form);
      if (url.includes("formspree")) {
        const email = fd.get("email");
        if (email) fd.append("_replyto", email);
        const asunto = fd.get("asunto");
        if (asunto) fd.append("_subject", `Contacto Forsvar · ${asunto}`);
      }

      const res = await fetch(url, {
        method: "POST",
        headers: { Accept: "application/json" },
        body: fd,
        mode: "cors"
      });

      let data = null;
      try {
        data = await res.json();
      } catch (_) {
        /* ignore */
      }

      if (!res.ok) {
        let detail = `código ${res.status}`;
        if (data) {
          if (Array.isArray(data.errors) && data.errors.length) detail = data.errors.join(", ");
          else if (data.error) detail = String(data.error);
          else if (data.message) detail = String(data.message);
        }
        throw new Error(detail);
      }

      form.reset();
      setSent(true);
    } catch (err) {
      const reason = err && err.message ? err.message : "error de red";
      setSubmitError(t("contact.err.send").replace("{reason}", reason));
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="contact-wrap">
          <div className="contact-intro">
            <span className="kicker"><span className="dot" />{t("contact.kicker")}</span>
            <h1 className="hero-headline" style={{ marginTop: 22 }}>
              <TypedHeadline key={lang} segments={segments} />
            </h1>
            <p className="hero-sub" style={{ maxWidth: "46ch", marginTop: 28 }}>
              {t("contact.sub")}
            </p>

            <div className="contact-direct">
              <span className="kicker" style={{ marginBottom: 10 }}>{t("contact.direct.kicker")}</span>
              <a href="mailto:contacto@forsvar.io" className="contact-email">
                contacto@forsvar.io <span className="arr">↗</span>
              </a>
              <p className="contact-direct-note">
                {t("contact.direct.note")}
              </p>
            </div>
          </div>

          <form className="contact-form" onSubmit={onSubmit}>
            {sent ? (
              <div className="apply-sent">
                <div className="sent-mark">✓</div>
                <h3>{t("contact.form.sent.title")}</h3>
                <p>{t("contact.form.sent.p")}</p>
              </div>
            ) : (
              <>
                {submitError ? <p className="contact-form-error" role="alert">{submitError}</p> : null}
                <Field label={t("contact.form.name")} required>
                  <input
                    type="text"
                    name="nombre"
                    required
                    disabled={submitting}
                    onInvalid={setContactFieldMessage}
                    onInput={clearContactFieldMessage}
                  />
                </Field>
                <Field label={t("contact.form.email")} required>
                  <input
                    type="email"
                    name="email"
                    required
                    disabled={submitting}
                    onInvalid={setContactFieldMessage}
                    onInput={clearContactFieldMessage}
                  />
                </Field>
                <Field label={t("contact.form.subject")} required full>
                  <input
                    type="text"
                    name="asunto"
                    required
                    disabled={submitting}
                    onInvalid={setContactFieldMessage}
                    onInput={clearContactFieldMessage}
                  />
                </Field>
                <Field label={t("contact.form.msg")} required full>
                  <textarea
                    name="msg"
                    rows="6"
                    required
                    disabled={submitting}
                    onInvalid={setContactFieldMessage}
                    onInput={clearContactFieldMessage}
                  ></textarea>
                </Field>
                <div className="apply-actions">
                  <button type="submit" className="btn btn-primary" disabled={submitting}>
                    {submitting ? t("contact.form.sending") : <>{t("contact.form.submit")} <Arrow /></>}
                  </button>
                  <span className="apply-note">{t("contact.form.required")}</span>
                </div>
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

function Field({ label, required, children, full }) {
  return (
    <label className={`fld ${full ? "fld-full" : ""}`}>
      <span className="fld-label">{label}{required && <em>*</em>}</span>
      {children}
    </label>
  );
}

window.ContactPage = ContactPage;