import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
import { __ } from '@wordpress/i18n';
import { useNavigate } from 'react-router-dom';
import { useForm } from 'react-hook-form';
import { is, isEmpty, isNil } from 'ramda';

// components
import FormField from '../../../../components/FormField';
import FormFieldRepeater from '../../../../components/FormFieldRepeater';
import FormFieldRepeaterCriteria from '../../../../components/FormFieldRepeaterCriteria';
import BandoEditFormActions from '../BandoEditFormActions';
import UnsavedChangesDetector from '../../../../components/UnsavedChangesDetector';

const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors }, ref) {
    const navigate = useNavigate();
    const {
        control,
        handleSubmit,
        formState: { errors, isValid },
        setValue,
        register,
        trigger,
        getValues,
        clearErrors
    } = useForm({defaultValues: initialData, mode: 'onChange'});
    const values = getValues();

    const onSubmit = (formData) => {
        if (!isNil(formData.dates) && formData.dates.length) {
            formData.dates = formData.dates.map(v => is(String, v) ? v : v.toISOString());
        }
        console.log('onSubmit', formData);
    };

    // TODO temp data
    const exampleOfCriteriaOptions = [
        { id: 15, value: 'Innovatività del progetto', score: 9 },
        { id: 16, value: 'Impatto sulla competitività dell\'azienda', score: 3 },
        { id: 17, value: 'Sostenibilità economico-finanziaria', score: 5 }
    ];
    const exampleOfChecklistOptions = [
        { id: 15, value: 'Innovatività del progetto' }
    ];
    // end of temp data

    const openPreview = () => {
        navigate('/bandi/preview/11');
    }

    const openPreviewEvaluation = () => {
        navigate('/bandi/preview-evaluation/11');
    }

    useImperativeHandle(
        ref,
        () => {
            return {
                isFormValid: () => {
                    return isValid;
                },
                getErrors: () => {
                    return errors;
                },
                getValues: () => {
                    return getValues();
                }
            }
        }, [errors, isValid]);

    useEffect(() => {
        trigger().then(() => clearErrors());
    }, []);

    return (
        <form className="appForm" onSubmit={handleSubmit(onSubmit)}>
            <UnsavedChangesDetector initialData={initialData} getValuesFn={getValues}/>
            <FormFieldRepeaterCriteria
                data={values}
                setDataFn={setValue}
                fieldName="criteria"
                options={exampleOfCriteriaOptions}
                errors={errors}
                register={register}
                label={<>{__('Criteri di valutazione', 'gepafin')}*
                    <span>{__('(almeno 1 criterio di valutazione)', 'gepafin')}</span></>}
                config={{
                    validate: {
                        minOneItem: v => !isEmpty(v) || __('Almeno 1 criterio di valutazione', 'gepafin'),
                        noEmptyValue: v => v
                                .filter(o => isEmpty(o.value) || isEmpty(o.score)).length === 0
                            || __('Non lasciare il valore vuoto', 'gepafin')
                    }
                }}/>

            <FormField
                type="fileupload"
                setDataFn={setValue}
                fieldName="documentation"
                label={__('Documentazione', 'gepafin')}
                control={control}
                errors={errors}
                defaultValue={values['documentation']}
                config={{ required: __('È obbligatorio', 'gepafin') }}
                accept="application/pdf,application/vnd.ms-excel"
                chooseLabel={__('Aggiungi documento', 'gepafin')}
                multiple={true}
                doctype='document'
                register={register}
            />

            <FormField
                type="fileupload"
                setDataFn={setValue}
                fieldName="images"
                label={__('Immagine del Bando', 'gepafin')}
                control={control}
                errors={errors}
                defaultValue={values['images']}
                doctype='images'
                register={register}
            />

            <FormFieldRepeater
                data={values}
                setDataFn={setValue}
                fieldName="checklist"
                options={exampleOfChecklistOptions}
                errors={errors}
                register={register}
                label={<>{__('Checklist valutazione Pre-Istruttoria', 'gepafin')}*
                    <span>{__('(almeno 1 elemento)', 'gepafin')}</span></>}
                config={{
                    validate: {
                        minOneItem: v => !isEmpty(v) || __('Almeno 1 elemento', 'gepafin'),
                        noEmptyValue: v => v
                            .filter(o => isEmpty(o.value)).length === 0 || __('Non lasciare il valore vuoto', 'gepafin')
                    }
                }}
            />

            <div className="appPage__spacer"></div>

            <div className="appPageSection__hr">
                <span>{__('Azioni', 'gepafin')}</span>
            </div>

            <BandoEditFormActions
                openPreview={openPreview}
                openPreviewEvaluation={openPreviewEvaluation}/>
        </form>
    )
})

export default BandoEditFormStep2;