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

import { InterfaceTextArea, InterfaceTextInput } from '@/components/forms/interface_input'
import { useContext } from 'react'
import { ClientContext } from '@/utils/cartProvider'

import { useForm } from "react-hook-form";
import { schemaForm9 } from '../../../../public/assets/yup'
import { yupResolver } from '@hookform/resolvers/yup';

export default function Form9 () {
    const { dispatch } = useContext(ClientContext);

    const updateClient = (title, subject, pages, statut) => {
        dispatch({
            type: 'ADD_TO_CART9',
            study_title: title,
            study_subject: subject,
            pages: pages,
            statut:statut
        })
    }

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

    function onSubmit(data) {
        const {study_title, study_subject, pages, statut} = data
        updateClient(study_title, study_subject, pages, statut)
        dispatch({
            type: 'KEEP_STEP',
            step: 1
        })
    }

    return(
    <form onSubmit={handleSubmit(onSubmit)} className='grid grid-cols-2 gap-10 w-[600px] rounded-xl sm:flex sm:flex-col sm:w-[80vw] 2sm:w-[90vw]'>
        <InterfaceTextInput label='Statut visé *' name="statut" options={{...register("statut")}} commonError={errors.statut} commonErrorMessage={errors.statut?.message}/>
        <InterfaceTextInput label='Intitulé du poste visé *' name="study_title" options={{...register("study_title")}} commonError={errors.study_title} commonErrorMessage={errors.study_title?.message}/>
        <InterfaceTextArea label='Description du sujet *' placeholder={`Décrivez votre sujet ou précisez si vous n'avez pas de sujet`} name="study_subject" height={6}  options={{...register("study_subject")}} commonError={errors.study_subject} commonErrorMessage={errors.study_subject?.message}/>
        <div>
            <InterfaceTextInput label='Nombre de pages *' placeholder='20' name="pages" options={{...register("pages")}} commonError={errors.pages} commonErrorMessage={errors.pages?.message}/>
        </div>
        <div className='col-span-2 mt-2 flex justify-end'>
            <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>
    )
}