import Layout from "@/components/layout/layout";
import Link from "next/link";
import Image from "next/image";
import beTutor from '../../../public/assets/interface/be-tutor.svg'
import white_arrow from '../../../public/assets/interface/white_arrow.svg'

import { InterfaceTextArea, InterfaceTextInput, InterfaceFiles } from '@/components/forms/interface_input'
import { CustomSelector } from "@/components/forms/textInput";
import { useEffect } from 'react'
import { Loading } from "@/components/loader";

import { useForm } from "react-hook-form";
import data from '../../../public/assets/data/data.json'
import { schemaBeTutor } from '../../../public/assets/yup'
import { yupResolver } from '@hookform/resolvers/yup';
import { POSTRequest } from "@/utils/requestHeader";

import ReCAPTCHA from "react-google-recaptcha"
import { useRef, useState } from "react"

import { NoIndexHead } from "@/utils/customHead";

const API_URL = process.env.NEXT_PUBLIC_API_URL
const SITE_KEY = process.env.NEXT_PUBLIC_SITE_KEY

export default function BeTutor() {
    const recaptchaRef = useRef(null)
    const [isVerified, setIsverified] = useState(false)
    const [docId, setDocId] = useState([])
    const [targetFile, setTargetFile] = useState()
    const [currentType, setCurrentType] = useState()
    const [submitLoading, setSubmitLoading] = useState(false)
    const [dataDisciplines, setDataDisciplines] = useState([])
    const [dataExpertises, setDataExpertises] = useState([])
    const [loading, setLoading] = useState(false)
    const [devisSend, setDevisSend] = useState(false)
    const [logErr, setLogErr] = useState(false)

    const { handleSubmit, register, formState: {errors}} = useForm({
        resolver: yupResolver(schemaBeTutor)
    })

    const onReCAPTCHAChange = async (captchaCode) => {
      // reCAPTCHA code null / undefined indicating that it was expired then return early
      if (!captchaCode) return;
      try {
        const response = await fetch("/api/serverActions", {
          method: "POST",
          body: JSON.stringify({captcha: captchaCode }),
          headers: {
            "Content-Type": "application/json",
          },
        });
        if (response.ok) {
          setIsverified(true)
        } else {
          const error = await response.json();
          setIsverified(false)
          throw new Error(error.message)
        }
      } catch (error) {
        console.log(error?.message || "Something went wrong");
      }
    };

    async function uploadFile(e, fileT){
      const formData3 = new FormData();
      if(e?.target?.files.length > 0) {
        formData3.append("file[]", e?.target?.files[0]);
      } else {    
          return
      }
      setSubmitLoading(true)
      try {
          const form = await fetch(`${API_URL}/api/files/upload`, {method: "POST", mode: "cors", body: formData3})
          const register = await form.json()
          setDocId([
              ...docId?.filter(file => file?.title !== fileT),
              {id:register[0].id, url:register[0].download_url, title:fileT}
          ])
          setSubmitLoading(false)
      } catch (err) {
          setSubmitLoading(false)
          console.error('Request failed:' + err.message)
      }
    }
    useEffect(() => {
      uploadFile(targetFile, currentType)
  // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [targetFile, currentType])
    
    async function onSubmit(data) {
      setLoading(true)
      setIsverified(false)
      data.disciplines = dataDisciplines
      data.expertises = dataExpertises
      const {lastname, firstname, email, phone, statut, main_activity, disciplines, expertises, comment} = data
      let newObj = {}
      for(let file of docId) {
          newObj[file.id] = {title: file.title}
      }
      try {
        const response = await fetch(`${API_URL}/api/enrolments`, POSTRequest({
          lastname:lastname, 
          firstname:firstname, 
          email:email, 
          phone:phone, 
          statut:statut, 
          main_activity:main_activity,
          disciplines:disciplines,
          expertises:expertises,
          files: newObj,
          comment:comment
        }))
        if(response.status === 200){
            setLoading(false)
            setDevisSend(true)
            return
        }
        recaptchaRef.current.reset();
        setLogErr(true)
        setLoading(false)
      } catch (err) {
        console.error('Request failed:' + err)
        setLogErr(true)
        setLoading(false)
      }
    }

  return (
    <>
    <NoIndexHead />
          <Layout>
            <main className='w-[100vw] flex flex-col tracking-[0.2px]' >
                <section className='h-[530px] relative w-full bg-[#3d9ec2] pl-[5vw] flex gap-20 text-white justify-center items-center lg:h-[400px] md:h-auto md:py-14 md:gap-5 sm:py-10'>
                    <div className="flex flex-col gap-10 max-w-[700px] md:px-10 md:text-center sm:px-3">
                        <div className='h-2 bg-white w-[150px] md:hidden'></div>
                        <h1 className='text-3xl font-bold xl:max-w-[600px] lg:max-w-[400px] lg:text-2xl sm:text-xl'>Devenir tuteur - Formateur</h1>
                        <p className='text-xl lg:text-base'>{`Vous souhaitez rejoindre l'aventure Scriptor ? Remplissez le formulaire ci-dessous et commencez à générer des revenus !`}</p>
                    </div>
                    <Image src={beTutor} alt="Board icon" className="w-[450px] xl:w-[350px] h-auto md:hidden" priority />
                </section>
                <section className="relative w-full bg-[rgb(61,158,194)] flex gap-10 pb-32 text-white justify-center items-center">
                  {loading                  
                    ? <Loading />
                    : devisSend 
                      ? <div className="bg-white text-[#252B42] w-[80%] p-8 rounded-lg max-w-fit my-14 flex flex-col gap-4 text-lg text-center sm:w-[90%]">
                        <p className="text-2xl font-bold">{`Votre demande a été envoyée avec succès !`}</p>
                        <p>{`Nous vous contacterons dans les meilleurs délais afin de vous donner une réponse.`}</p>
                        <Link href='https://www.scriptor.fr/' className='px-[20px] rounded-xl py-3.5 mt-5 bg-[#2A3955] text-white w-fit place-self-center'>
                                <p className='font-bold'>Retourner sur le site</p>
                        </Link>
                      </div>
                      : <form onSubmit={handleSubmit(onSubmit)} className='grid grid-cols-2 px-5 gap-10 w-[1000px] rounded-xl sm:gap-5 sm:px-0 sm:flex sm:flex-col sm:w-[80vw] 2sm:w-[90vw]'>
                        {logErr ? <div className="text-sm text-[#d32f2f] text-center col-span-2">Une erreur est survenue, nous vous invitons à ré-essayer plus tard.</div> : ''}
                        <InterfaceTextInput label='Votre prénom *' placeholder='John' name="firstname" options={{...register("firstname")}} commonError={errors.firstname} commonErrorMessage={errors.firstname?.message}/>
                        <InterfaceTextInput label='Votre nom *' placeholder='Doe' name="lastname" options={{...register("lastname")}} commonError={errors.lastname} commonErrorMessage={errors.lastname?.message}/>
                        <InterfaceTextInput label='Téléphone *' placeholder='0612345678' name="phone" options={{...register("phone")}} commonError={errors.phone} commonErrorMessage={errors.phone?.message}/>
                        <InterfaceTextInput label='Email *' placeholder='johndoe@gmail.com' name="email" options={{...register("email")}} commonError={errors.email} commonErrorMessage={errors.email?.message}/>
                        <InterfaceTextInput label='Statut *' placeholder='Indépendant' name="statut" options={{...register("statut")}} commonError={errors.statut} commonErrorMessage={errors.statut?.message}/>
                        <InterfaceTextInput label='Activité principale *' name="main_activity" options={{...register("main_activity")}} commonError={errors.main_activity} commonErrorMessage={errors.main_activity?.message}/>
                        <div className="flex flex-col tracking-[0.2px] gap-3">
                          <label htmlFor='disciplines' className="text-white text-lg">{`Disciplines *`}</label>
                          <CustomSelector category={data.disciplines} categoryData={dataDisciplines} setCategoryData={setDataDisciplines} style={'rounded-[10px] bg-white text-typo font-normal font-sans text-base'}/>
                        </div>
                        <div className="flex flex-col tracking-[0.2px] gap-3">
                          <label htmlFor='expertises' className="text-white text-lg">{`Expertises *`}</label>
                          <CustomSelector category={data.expertises} categoryData={dataExpertises} setCategoryData={setDataExpertises} style={'rounded-[10px] bg-white text-typo font-normal font-sans text-base'}/>
                        </div>
                        <InterfaceTextArea label='Autres informations utiles' name="comment" height={4}  options={{...register("comment")}} commonError={errors.comment} commonErrorMessage={errors.comment?.message}/> 
                        <div>
                          <InterfaceFiles  fileType='CV' label={`Votre CV *`} docId={docId} setCurrentType={setCurrentType} setTargetFile={setTargetFile} setDocId={setDocId} submitLoading={submitLoading} />
                        </div>
                        <InterfaceFiles  fileType='Lettre de motivation' label={`Lettre de motivation`} docId={docId} setCurrentType={setCurrentType} setTargetFile={setTargetFile} setDocId={setDocId} submitLoading={submitLoading} />
                        <div className="sm:mt-16 sm:place-self-center">
                          <ReCAPTCHA
                              sitekey={SITE_KEY}
                              ref={recaptchaRef}
                              onChange={onReCAPTCHAChange}
                          />
                        </div>
                        <div className='col-span-2 mt-2 flex justify-end sm:place-self-center'>
                            <button type='submit' className='px-[25px] flex gap-3 rounded-xl py-5 bg-[#2A3955]' disabled={!isVerified} style={isVerified ? {backgroundColor:'#2A3955'} : {backgroundColor:'rgb(156 163 175'}}>
                                <Image src={white_arrow} alt="Arrow icon" priority />
                                <p className='font-bold'>Envoyer ma demande</p>
                            </button>
                        </div>
                    </form>
                  }
                </section>
            </main>
          </Layout>
      </>
  )
}