<script lang="ts">
import { useRuntimeConfig } from '#app';
export default{
    name :"Footer",
    data(){
        const turnstile = ref()
        return{
            input1:"Nom",
            input2:"Email",
            numero:"+33 7 66 66 78 67",
            turnstile
        }
    },
    setup() {
    const config = useRuntimeConfig();
        return {
            config
        };

    },
   
    
    methods:{
        async sendEmail() {
            const form = this.$refs.form as HTMLFormElement;
                try {
                    await this.$emailjs.sendForm(
                        this.config.public.emailjsServiceId,
                        this.config.public.emailjsTemplateId,
                        form,
                        this.config.public.emailjsPublicKey,
                        );
                    }
                    catch (error) {
                        console.log('FAILED...', error);
                    }
        },
        async sendF() {
            const token = this.turnstile; // Assurez-vous que turnstile a une méthode pour obtenir le token
       if (!token) {
               console.error('Token not available');
              this.reset();
           return;
     }

   try {
    const response = await fetch('/api/validateTurnstile', {
    method: 'POST',
     headers: {
     'Content-Type': 'application/json',
    },
      body: JSON.stringify({ token }), // Envoyez le token correctement
                });if (response.ok) {
          const result = await response.json();
   console.log(response)
     await this.sendEmail();
  console.log("Success")
         } else {
           const result = await response.json();
         console.error(result)
    console.error('Validation failed:', result);
          this.reset();
      }   } catch (error) {          console.error('Request failed:', error);
             this.reset();
   }
    },    
        reset(){
            this.turnstile.value?.reset()
        }
    },

<script lang="ts">
import { useRuntimeConfig } from '#app';
export default{
    name :"Footer",
    data(){
        const turnstile = ref()
        return{
            input1:"Nom",
            input2:"Email",
            numero:"+33 7 66 66 78 67",
            turnstile
        }
    },
    setup() {
    const config = useRuntimeConfig();
        return {
            config
        };

    },
   
    
    methods:{
        async sendEmail() {
            const form = this.$refs.form as HTMLFormElement;
                try {
                    await this.$emailjs.sendForm(
                        this.config.public.emailjsServiceId,
                        this.config.public.emailjsTemplateId,
                        form,
                        this.config.public.emailjsPublicKey,
                        );
                    }
                    catch (error) {
                        console.log('FAILED...', error);
                    }
        },
        async sendF() {
            const token = this.turnstile; // Assurez-vous que turnstile a une méthode pour obtenir le token
       if (!token) {
               console.error('Token not available');
              this.reset();
           return;
     }

   try {
    const response = await fetch('/api/validateTurnstile', {
    method: 'POST',
     headers: {
     'Content-Type': 'application/json',
    },
      body: JSON.stringify({ token }), // Envoyez le token correctement
                });if (response.ok) {
          const result = await response.json();
   console.log(response)
     await this.sendEmail();
  console.log("Success")
         } else {
           const result = await response.json();
         console.error(result)
    console.error('Validation failed:', result);
          this.reset();
      }   } catch (error) {          console.error('Request failed:', error);
             this.reset();
   }
    },    
        reset(){
            this.turnstile.value?.reset()
        }
    },

form class="footer--email" ref="form" @submit.prevent="sendF" method="POST">
            <h3>Pour me contacter</h3>
            <div class="container--email">
                <div class="email--nom--mail">
                    <InputsSimple :text="input1" type="text" name="from_name"/>
                    <InputsSimple :text="input2" type="text" name="email_id"/>
                </div>
                <textarea id="message" name="message" placeholder="Ecrivez votre message"></textarea>
            </div>
            <NuxtTurnstile  ref="turnstile" v-model="turnstile" />
            <button  id="send">Envoyer</button>
        </form>

        <p id="by">Made By ldesperrois</p>
    </footer>
</template>

form class="footer--email" ref="form" @submit.prevent="sendF" method="POST">
            <h3>Pour me contacter</h3>
            <div class="container--email">
                <div class="email--nom--mail">
                    <InputsSimple :text="input1" type="text" name="from_name"/>
                    <InputsSimple :text="input2" type="text" name="email_id"/>
                </div>
                <textarea id="message" name="message" placeholder="Ecrivez votre message"></textarea>
            </div>
            <NuxtTurnstile  ref="turnstile" v-model="turnstile" />
            <button  id="send">Envoyer</button>
        </form>

        <p id="by">Made By ldesperrois</p>
    </footer>
</template>