<script lang="ts">
import {t} from "$lib/translations";

let attemptedSubmit = false;
let submitted = false;
let form: {
  message: string
  name: string
  email: string
} = {
  message: '',
  name: '',
  email: ''
}

$: errorSlugs = ((): {
  message: string | null
  name: string | null
  email: string | null
} => {
  let message = null
  let name = null
  let email = null

  if (form.message.trim() === '') message = 'contact.errors.required'
  if (form.name.trim() === '') name = 'contact.errors.required'
  if (form.email.trim() === '') email = 'contact.errors.required'
  if (!form.email.includes('@') || form.email.endsWith('@')) email = 'contact.errors.email'

  return {
    message,
    name,
    email
  }
})()

$: invalid = Object.values(errorSlugs).some(slug => slug !== null)

const handleSubmit = () => {
  if (submitted) return
  attemptedSubmit = true

  if (invalid) return

  submitted = true
  const formData = new FormData()
  formData.append('message', form.message)
  formData.append('name', form.name)
  formData.append('email', form.email)
  fetch(
    'https://send.pageclip.co/ipMETNW8CCV8ka21myU6D22bvnOAV0Ag',
    {
      method: 'POST',
      body: formData
    }
  )
}
</script>

<section class="px-2 md:px-8 mb-16 max-w-[1280px] mx-auto">
  <h2 class="text-3xl mb-4 md:text-4xl">
    {$t('contact.h')}
  </h2>

  <form
    class="grid md:grid-cols-2 md:gap-4"
    on:submit|preventDefault={handleSubmit}
  >
    <label class="relative flex flex-col mb-6 md:mb-0">
      <span class="text-slate-400">{$t('contact.message')}</span>
      <textarea
        name="message"
        rows="5"
        autocomplete="off"
        bind:value={form.message}
        class="md:h-full"
        disabled={submitted}
      ></textarea>
      {#if attemptedSubmit && errorSlugs.message}
        <span class="text-sm text-red-500 absolute top-full">{$t(errorSlugs.message)}</span>
      {/if}
    </label>

    <div>
      <label class="relative flex flex-col mb-6">
        <span class="text-slate-400">{$t('contact.name')}</span>
        <input
          name="name"
          type="text"
          autocomplete="off"
          bind:value={form.name}
          disabled={submitted}
        />
        {#if attemptedSubmit && errorSlugs.name}
          <span class="text-sm text-red-500 absolute top-full">{$t(errorSlugs.name)}</span>
        {/if}
      </label>
      <label class="relative flex flex-col mb-6">
        <span class="text-slate-400">{$t('contact.email')}</span>
        <input
          name="email"
          type="email"
          autocomplete="off"
          bind:value={form.email}
          disabled={submitted}
        />
        {#if attemptedSubmit && errorSlugs.email}
          <span class="text-sm text-red-500 absolute top-full">{$t(errorSlugs.email)}</span>
        {/if}
      </label>
      <button
        class="p-4 mt-5 bg-slate-50 rounded-lg text-lg text-slate-950 font-semibold w-full hover:bg-white disabled:bg-slate-300"
        disabled={invalid && attemptedSubmit}
      >
        {#if !submitted}
          {$t('contact.submit')}
        {:else}
          {$t('contact.submitted')}
        {/if}
      </button>
    </div>
  </form>
</section>
