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, useState } from 'react'
import { ClientContext } from '@/utils/cartProvider'
import { themeGoldNugget, inputStyleGoldNugget } from '@/components/forms/selectInput'
import Select from 'react-select'

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

export default function Form4 () {
    const { dispatch } = useContext(ClientContext);
    const [questionnaire, setQuestionnaire] = useState(0)

    const updateClient = (title, subject, level, problematic, questionnaire) => {
        dispatch({
            type: 'ADD_TO_CART4',
            study_title: title,
            study_subject: subject,
            study_level: level,
            problematic: problematic,
            questionnaire : questionnaire
        })
    }

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

    function onSubmit(data) {
        const {study_title, study_subject, study_level, problematic, questionnaire} = data
        updateClient(study_title, study_subject, study_level,problematic, questionnaire)
        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 className='col-span-2'>
            <InterfaceTextArea label='Votre problématique *' name="problematic" height={1}  options={{...register("problematic")}} commonError={errors.problematic} commonErrorMessage={errors.problematic?.message}/>
        </div>
        <div className="flex flex-col tracking-[0.2px] gap-3 col-span-2">
            <label className="text-white text-lg">{`Nombre de questionnaires à analyser *`}</label>
            {errors.questionnaire && (<ErrorInput error={errors.questionnaire?.message} />)}
            <div className='flex gap-5 items-center'>
                <div className='bg-[#2A3955] w-9 flex justify-center py-2 px-3 text-sm rounded-lg font-medium'>{questionnaire}</div>
                <Slider defaultValue={0} sx={{color:'#2A3955', width:'500px'}} step={1} min={0} max={20} valueLabelDisplay="auto" {...register("questionnaire")} value={questionnaire} onChange={(e) => {setQuestionnaire(e.target.value); setQuestionnaire(e.target.value)}}/>
            </div>
        </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>
    )
}