'use client'
import { useState, useRef, FormEvent } from 'react'
import InfoBar from "~/components/InfoBar/"

import styles from '~/styles/form.module.css'

const submitUrl = 'https://kae.tempest.dev/api/contact/me'

export default function Contact() {
  const [submitting, setSubmitting] = useState(false)
  const [status, setStatus] = useState('')

  const nameRef = useRef<HTMLInputElement>()
  const emailRef = useRef<HTMLInputElement>()
  const messageRef = useRef<HTMLTextAreaElement>()

  const submit = async (ev: FormEvent<HTMLFormElement>) => {
    ev.preventDefault()

    setStatus('')

    const name = nameRef.current.value
    const email = emailRef.current.value
    const message = messageRef.current.value

    if (!name) setStatus(s => s + ' Name required.')
    if (!email) setStatus(s => s + ' Email required.')
    if (!message) setStatus(s => s + ' Message required.')

    if (!name || !email || !message)
      return

    setSubmitting(true)

    try {

      await fetch(submitUrl, {
        method: 'post',
        headers: {
          'content-type': 'application/json'
        },
        body: JSON.stringify({
          name, email, message
        })
      })

      setStatus('Message sent successfully')
    } catch {
      setStatus('Error submitting message, please try again')
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <>
      <h1 className="pageTitle">
        Contact
      </h1>
      <main className="mainColumn">
        <InfoBar>
          Be nice.  Please don't make us regret putting this here
        </InfoBar>
        <form className={styles.form} onSubmit={submit}>
          <label htmlFor="name">Name:</label>
          <input disabled={submitting} name="name" ref={nameRef} />

          <label htmlFor="email">Email:</label>
          <input disabled={submitting} name="email" ref={emailRef} />

          <label htmlFor="message">Message:</label>
          <textarea disabled={submitting} name="message" ref={messageRef} />

          <button disabled={submitting} type="submit">Submit</button>
          {status && <span className={styles.status}>{status}</span>}
          {/*<FormController
          url="https://kae.tempest.dev/api/contact/tempest"
          afterSubmit={() => setStatus('Message sent successfully!')}
          onError={() => setStatus('Error submitting message, please try again.')}
        >
          <Input name="name" validate={v => !!v} />
          <Input name="email" validate={v => !!v && v.includes('@')} />
          <TextArea name="message" validate={v => !!v && v.length < 1000} />
          <Button onClick={() => setStatus(null)} type="submit">submit</Button>
          {status && <p>{status}</p>}
        </FormController>*/}
        </form>
      </main>
    </>
  )
}