import Head from 'next/head'
import Link from 'next/link'
import styles from './contactform.module.css'
import { useState } from 'react'

import axios from "axios";


const NormalButton = (props)=>{
  return(
    
    <button type="submit" disabled={props.isLoading}>
        {props.isLoading ? 'A carregar...' : 'Enviar'}
    </button>
  )
}

const SuccessButton = ()=>{
  return(
    
    <button className={styles.successbutton} type="submit" disabled={true}>
      Sucesso!
    </button>
  )
}


export default function ContactForm() {
    const [isLoading, setIsLoading] = useState<boolean>(false)
    const [success, setSuccess] = useState(false)
    const [failed, setFailed] = useState(false)
 
    async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
      event.preventDefault()
      setIsLoading(true) // Set loading to true when the request starts
   
      try {
        const formData = new FormData(event.currentTarget)
        const response = await axios.post('/mailer.php', formData)
   
        // Handle response if necessary
        const data = await response
        // ...

        if(response.status===200){
          setSuccess(true)
        }
      } catch (error) {
        // Handle error if necessary
        console.error(error)
        setFailed(true)
      } finally {
        setIsLoading(false) // Set loading to false when the request completes
      }
    }

   
  return (
    <section className={styles.formsec}>
        <div className={styles.title}>
            <h3>
                O caminho para o olímpio começa aqui
            </h3>
            <p>
                Por favor, compartilha os detalhes do teu projeto e agenda uma reunião connosco.
            </p>

        </div>
        <div className={styles.forms}>
            <form onSubmit={onSubmit}>
                <div className={styles.nametel}>
                    <input type="text" name="name" placeholder='Nome e Apelido' />
                    <input type="phone" name="phone" placeholder='Número para contacto' />
                </div>
                <input type="email" name="email" placeholder='Endereço de e-mail' />
                <textarea placeholder='Mensagem' name="message"></textarea>
                <div className={styles.privacy_sentence}>
                    <label className="container">
                        <input type="checkbox" name='privacycheck'/>
                        <div className="checkmark"></div>
                    </label>
                    <p> Concordo que a Creative Discovery utilize os meus dados para motivos de contacto e marketing. </p>
                </div>
                {success ? <SuccessButton/> : <NormalButton isLoading={isLoading}/>}
                {failed ? <span className={styles.error}>Ocorreu um erro no envio do teu contacto, tenta mais uma vez ou contacta-nos através do nosso email</span> : ""}
            </form>
        </div>
    </section>

  )
}