import Image from 'next/image'
import white_arrow from '../../../../public/assets/interface/white_arrow.svg'
import left_arrow from '../../../../public/assets/interface/left_arrow.svg'

import { InterfaceTextArea } from '@/components/forms/interface_input'
import { useState, useContext, useEffect } from 'react'
import { ClientContext } from '@/utils/cartProvider'
import { themeGoldNugget, inputStyleGoldNugget } from '@/components/forms/selectInput'
import Select from 'react-select'

import { useForm, Controller } from "react-hook-form";
import data from '../../../../public/assets/data/data.json'
import { schemaInscription2 } from '../../../../public/assets/yup'
import { yupResolver } from '@hookform/resolvers/yup';
import { InterfaceFiles } from '@/components/forms/interface_input'

const API_URL = process.env.NEXT_PUBLIC_API_URL

export default function Form21 ({formationFormID, wordSelector}) {
    const [docId, setDocId] = useState([])
    const [targetFile, setTargetFile] = useState()
    const [currentType, setCurrentType] = useState()
    const [submitLoading, setSubmitLoading] = useState(false)
    const [delaySelector, setDelaySelector] = useState([])

    //select the good delay for selector
    useEffect(() => {
        switch(formationFormID){
            case 1 : //1/3j
            case 11:
            case 10:
            case 9:
            case 8 :
            case 5 : setDelaySelector(data.delay1.map(d => ({value:d, label:d})));break;
            case 2 : //12h
                switch(true){
                    case wordSelector <= 9000 : setDelaySelector(data.delay2.map(d => ({value:d, label:d})));break;
                    case wordSelector > 9000 && wordSelector <= 18000 : setDelaySelector(data.delay2.slice(1, data.delay2.length).map(d => ({value:d, label:d})));break;
                    case wordSelector > 18000 && wordSelector <= 27000 : setDelaySelector(data.delay2.slice(2, data.delay2.length).map(d => ({value:d, label:d})));break;
                    case wordSelector > 27000 && wordSelector <= 36000 : setDelaySelector(data.delay2.slice(3, data.delay2.length).map(d => ({value:d, label:d})));break;
                    case wordSelector > 36000 && wordSelector <= 50000 : setDelaySelector(data.delay2.slice(4, data.delay2.length).map(d => ({value:d, label:d})));break;
                    case wordSelector > 50000 : setDelaySelector(data.delay2.slice(5, data.delay2.length).map(d => ({value:d, label:d})));break;
                    default: 
                    setDelaySelector(data.delay2.map(d => ({value:d, label:d})));break;
                }; break
            case 3 : //7/10j
            case 4 : 
            case 7 : setDelaySelector(data.delay3.map(d => ({value:d, label:d})));break;
            default: ''
        }
    }, [formationFormID, wordSelector])

    async function uploadFile(e, fileT){
        const formData2 = new FormData();
        if(e?.target?.files.length > 0) {
            formData2.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: formData2})
            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])
    
   
    const { dispatch } = useContext(ClientContext);
    const updateClient = (delay, files, comment) => {
        dispatch({
            type: 'UPDATE_CART1',
            delay: delay,
            files: files,
            comment: comment,
        })
    }

    const {control, handleSubmit, register, formState: {errors}} = useForm({resolver: yupResolver(schemaInscription2)})
    function onSubmit(data) {
        let newObj = {}
        for(let file of docId) {
            newObj[file.id] = {title: file.title}
        }
        const {delay, comment} = data
        updateClient(delay, newObj, comment)
        dispatch({
            type: 'KEEP_STEP',
            step: 2
        })
        window?.scrollTo({top:700,behavior: "smooth"})
    }

    return(
        <form onSubmit={handleSubmit(onSubmit)} className='grid grid-cols-2 gap-5 w-[600px] rounded-xl sm:flex sm:flex-col sm:w-[80vw] 2sm:w-[90vw]'>
                <div className="flex flex-col tracking-[0.2px] gap-3 col-span-2">
                    <label htmlFor='delay' className="text-white text-lg">{`Délai de réalisation *`}</label>
                    <Controller
                        name="delay"
                        control={control}
                        render={({ field: {onChange, value} }) =>
                            <Select placeholder='Choisir un délai...' required
                                    styles={inputStyleGoldNugget} theme={themeGoldNugget.theme} className='text-black placeholder:text-black'
                                    value={delaySelector.find((current) => current.value === value)} onChange={(selectedOption) => {onChange(selectedOption.value)}}
                                    options={delaySelector} instanceId={"3"} 
                                    components={{IndicatorSeparator: () => null}} />}
                                />
                </div>
                <InterfaceFiles fileType='Consignes' label='Vos consignes' docId={docId} setCurrentType={setCurrentType} setTargetFile={setTargetFile} setDocId={setDocId} submitLoading={submitLoading} />
                <div style={formationFormID !== 11 && formationFormID !== 7 && formationFormID !== 8 && formationFormID !== 9 ? {display:'flex'} : {display:'none'}}>
                    <InterfaceFiles  fileType='Ebauche' label={`Ebauche de l'avancement`} docId={docId} setCurrentType={setCurrentType} setTargetFile={setTargetFile} setDocId={setDocId} submitLoading={submitLoading} />
                </div>
                <div style={formationFormID === 4 ? {display:'flex'} : {display:'none'}}>
                    <InterfaceFiles fileType='Questionnaires' label='Retour de vos questionnaires' docId={docId} setCurrentType={setCurrentType} setTargetFile={setTargetFile} setDocId={setDocId} submitLoading={submitLoading} />
                </div>
                <div style={formationFormID === 7 ? {display:'flex'} : {display:'none'}}>
                    <InterfaceFiles fileType={`Travail fin d'études`} label={`Votre travail de fin d'études`} docId={docId} setCurrentType={setCurrentType} setTargetFile={setTargetFile} setDocId={setDocId} submitLoading={submitLoading} />
                </div>
                <div style={formationFormID === 8 || formationFormID === 9  ? {display:'flex'} : {display:'none'}}>
                    <InterfaceFiles fileType={`Référentiel diplôme`} label={`Référentiel du diplôme visé`} docId={docId} setCurrentType={setCurrentType} setTargetFile={setTargetFile} setDocId={setDocId} submitLoading={submitLoading} />
                </div>
                <div style={formationFormID === 8 || formationFormID === 9 ? {display:'flex'} : {display:'none'}}>
                    <InterfaceFiles fileType={`CV`} label={`Votre CV`} docId={docId} setCurrentType={setCurrentType} setTargetFile={setTargetFile} setDocId={setDocId} submitLoading={submitLoading} />
                </div>
                <InterfaceTextArea label='Commentaire / Consignes' height={6} placeholder={`Merci de bien vouloir renseigner toute information utile à la mission.`} name="comment"  options={{...register("comment")}} commonError={errors.comment} commonErrorMessage={errors.comment?.message}/>                
                <div className='col-span-2 mt-2 flex justify-between'>
                    <button type='button' onClick={() => {dispatch({type: 'KEEP_STEP', step: 0})}} className='px-[25px] flex gap-3 rounded-xl py-5 bg-[#2A3955]'>
                        <Image src={left_arrow} alt="Arrow icon" priority />
                        <p className='font-bold'>Précédent</p>
                    </button>
                    <button type='submit' className='px-[25px] flex gap-3 rounded-xl py-5 bg-[#2A3955]'>
                        <Image src={white_arrow} alt="Arrow icon" priority />
                        <p className='font-bold'>Suivant</p>
                    </button>
                </div>
        </form>
    )
}