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 { 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 { schemaForm5 } from '../../../../public/assets/yup'
import { yupResolver } from '@hookform/resolvers/yup';

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

    const updateClient = (title, subject, level, pages) => {
        dispatch({
            type: 'ADD_TO_CART5',
            study_title: title,
            study_subject: subject,
            study_level: level,
            pages: pages
        })
    }

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

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

    const levelSelector = data.levels.map(d => ({value:d, label:d}))

    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]'>
        <div className="flex flex-col tracking-[0.2px] gap-3">
            <label htmlFor='study_level' className="text-white text-lg">{`Niveau d'étude *`}</label>
            <Controller
                name="study_level"
                control={control}
                render={({ field: {onChange, value} }) =>
                    <Select placeholder='Sélectionner...' required
                            styles={inputStyleGoldNugget} theme={themeGoldNugget.theme} className='text-black'
                            value={levelSelector.find((current) => current.value === value)} onChange={(selectedOption) => {onChange(selectedOption.value)}}
                            options={levelSelector} instanceId={"1"} 
                            components={{IndicatorSeparator: () => null}} />}
                        />
        </div>
        <InterfaceTextInput label='Intitulé de votre formation *' placeholder='Marchés Financiers' 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>
    )
}