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

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

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

    const updateClient = (subject, timing) => {
        dispatch({
            type: 'ADD_TO_CART6',
            study_subject: subject,
            timing: timing
        })
    }

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

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

    const selector = () => {
        if(new Date().getMonth() > 10) return [
            {value:`05/${new Date().getFullYear()+1}`, label:`05/${new Date().getFullYear()+1}`},
            {value:`11/${new Date().getFullYear()+1}`, label:`11/${new Date().getFullYear()+1}`}
        ]
        if(new Date().getMonth() > 4) return [
            {value:`11/${new Date().getFullYear()}`, label:`11/${new Date().getFullYear()}`}, 
            {value:`05/${new Date().getFullYear()+1}`, label:`05/${new Date().getFullYear()+1}`},
            {value:`11/${new Date().getFullYear()+1}`, label:`11/${new Date().getFullYear()+1}`}
        ];
        return [
            {value:`05/${new Date().getFullYear()}`, label:`05/${new Date().getFullYear()}`},
            {value:`11/${new Date().getFullYear()}`, label:`11/${new Date().getFullYear()}`}, 
            {value:`05/${new Date().getFullYear()+1}`, label:`05/${new Date().getFullYear()+1}`},
            {value:`11/${new Date().getFullYear()+1}`, label:`11/${new Date().getFullYear()+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]'>
        <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="flex flex-col tracking-[0.2px] gap-3">
            <label htmlFor='timing' className="text-white text-lg">{`Session visée *`}</label>
            <Controller
                name="timing"
                control={control}
                render={({ field: {onChange, value} }) =>
                    <Select placeholder='Sélectionner...' required
                            styles={inputStyleGoldNugget} theme={themeGoldNugget.theme} className='text-black'
                            value={selector().find((current) => current.value === value)} onChange={(selectedOption) => {onChange(selectedOption.value)}}
                            options={selector()} instanceId={"1"} 
                            components={{IndicatorSeparator: () => null}} />}
                        />
        </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>
    )
}