import React, { useState, useEffect, useRef } from 'react';
import { __ } from '@wordpress/i18n';
import { useNavigate, useParams } from 'react-router-dom';
import { useForm } from 'react-hook-form';

// components
import getBandoLabel from '../../helpers/getBandoLabel';
import { Button } from 'primereact/button';
import { Dropdown } from 'primereact/dropdown';
import FormField from '../../components/FormField';
import FormFieldRepeater from '../../components/FormFieldRepeater';
import { Skeleton } from 'primereact/skeleton';
import FormFieldRepeaterCriteria from '../../components/FormFieldRepeaterCriteria';
import FormFieldRepeaterFaq from '../../components/FormFieldRepeaterFaq';

const BandoEdit = () => {
    const navigate = useNavigate();
    const { id } = useParams();
    const [data, setData] = useState({});
    const [isLoading, setIsLoading] = useState(true);
    const [selectedTemplate, setSelectedTemplate] = useState(null);
    const [templates, setTemplate] = useState(null);
    const {
        control,
        reset,
        handleSubmit,
        formState: { errors },
        setValue,
        register
    } = useForm(data);
    let minDateStart = new Date();

    const onSubmit = formData => console.log(formData);

    // temp
    const exampleOfAimedToOptions = [{ id: 11, value: 'PMI con sede in Umbria' }];
    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 exampleOfFaqOptions = [
        { id: 2, question: 'Question 1?', answer: 'Lorem ipsum dolor' }
    ];
    const exampleOfChecklistOptions = [
        { id: 15, value: 'Innovatività del progetto' }
    ];

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

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

    const openBandoFormManagement = () => {
        navigate('/bandi/11/forms');
    }

    useEffect(() => {
        const parsed = parseInt(id)
        const bandoId = !isNaN(parsed) ? parsed : 0;

        setTimeout(() => {
            const data = 0 === bandoId
                ? {
                    status: 'draft',
                    name: ''
                }
                : {
                    name: 'Bando Innovazione 2024',
                    description: '',
                    start_date: '2024-08-08T00:00:00+00:00',
                    end_date: '2024-08-30T00:00:00+00:00',
                    submissions: 24,
                    status: 'publish',
                    id: 11
                }
            setData(data);
            reset();

            const templates = [
                { name: 'Il mio template', value: 22 },
                { name: 'Template #11', value: 11 },
            ];
            setTemplate(templates);
            setIsLoading(false);
        }, 3000);
    }, [id]);

    return (
        <div className="appPage">
            <div className="appPage__pageHeader">
                <h1>{__('Creazione/Modifica Bando', 'gepafin')}</h1>
                <p>
                    {__('Stato:', 'gepafin')}
                    <span>{getBandoLabel(data.status)}</span>
                </p>
            </div>

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

            {!isLoading
                ? <div className="pageBando__templateSelection">
                    <div className="appForm__field">
                        <label htmlFor="template">
                            {__('Usa Template Salvato', 'gepafin')}
                        </label>
                        <Dropdown
                            id="template"
                            value={selectedTemplate}
                            onChange={(e) => setSelectedTemplate(e.value)}
                            options={templates}
                            optionLabel="name"
                            placeholder={__('Seleziona template', 'gepafin')}/>
                    </div>
                    <Button
                        onClick={() => console.log('use template')}
                        label={__('Applica', 'gepafin')}
                        icon="pi pi-check"
                        iconPos="right"/>
                </div> : null}

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

            {!isLoading
                ? <>
                    <form className="appForm" onSubmit={handleSubmit(onSubmit)}>
                        <FormField
                            type="textinput"
                            fieldName="name"
                            label={__('Titolo del Bando', 'gepafin')}
                            control={control}
                            errors={errors}
                            defaultValue={data['name']}
                            config={{ required: __('È obbligatorio', 'gepafin') }}
                        />

                        <FormField
                            type="textarea"
                            fieldName="descriptionShort"
                            label={__('Descrizione breve', 'gepafin')}
                            control={control}
                            errors={errors}
                            defaultValue={data['descriptionShort']}
                            config={{
                                required: __('È obbligatorio', 'gepafin')
                            }}
                        />

                        <FormField
                            type="textarea"
                            fieldName="descriptionLong"
                            label={__('Descrizione completa', 'gepafin')}
                            control={control}
                            errors={errors}
                            defaultValue={data['descriptionLong']}
                            config={{
                                required: __('È obbligatorio', 'gepafin'),
                                minLength: 200
                            }}
                            infoText={__('Almeno 200 caratteri', 'gepafin')}
                        />

                        <FormFieldRepeater
                            data={data}
                            setDataFn={setValue}
                            fieldName="aimedTo"
                            options={exampleOfAimedToOptions}
                            errors={errors}
                            register={register}
                            label={<>{__('A chi si rivolge', 'gepafin')}*
                                <span>{__('(almeno 1 tipo di destinatari)', 'gepafin')}</span></>}
                        />

                        <FormField
                            type="textarea"
                            fieldName="documentationRequested"
                            label={__('Documentazione richiesta', 'gepafin')}
                            control={control}
                            errors={errors}
                            defaultValue={data['documentationRequested']}
                            config={{
                                required: __('È obbligatorio', 'gepafin')
                            }}
                        />

                        <FormField
                            type="datepickerrange"
                            fieldName="dates"
                            label={__('Dati di pubblicazione', 'gepafin')}
                            control={control}
                            errors={errors}
                            defaultValue={data['dates']}
                            config={{ required: __('È obbligatorio', 'gepafin') }}
                            minDate={minDateStart}
                        />

                        <div className="appForm__twoCols">
                            <FormField
                                type="numberinput"
                                fieldName="amount"
                                label={__('Dotazione del Bando', 'gepafin')}
                                control={control}
                                errors={errors}
                                defaultValue={data['amount']}
                                config={{ required: __('È obbligatorio', 'gepafin') }}
                                inputgroup={true}
                                icon="€"
                            />

                            <FormField
                                type="numberinput"
                                fieldName="amountMax"
                                label={__('Importo massimo per Progetto', 'gepafin')}
                                control={control}
                                errors={errors}
                                defaultValue={data['amountMax']}
                                config={{ required: __('È obbligatorio', 'gepafin') }}
                                inputgroup={true}
                                icon="€"
                            />
                        </div>

                        <FormFieldRepeaterCriteria
                            data={data}
                            setDataFn={setValue}
                            fieldName="criteria"
                            options={exampleOfCriteriaOptions}
                            errors={errors}
                            register={register}
                            label={<>{__('Criteri di valutazione', 'gepafin')}*
                                <span>{__('(almeno 1 criterio di valutazione)', 'gepafin')}</span></>}/>

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

                        <FormField
                            type="fileupload"
                            fieldName="images"
                            label={__('Immagine del Bando', 'gepafin')}
                            control={control}
                            errors={errors}
                            defaultValue={data['documentation']}
                        />

                        <FormFieldRepeaterFaq
                            data={data}
                            setDataFn={setValue}
                            fieldName="faq"
                            options={exampleOfFaqOptions}
                            errors={errors}
                            register={register}
                            label={__('FAQ', 'gepafin')}/>

                        <FormFieldRepeater
                            data={data}
                            setDataFn={setValue}
                            fieldName="checklist"
                            options={exampleOfChecklistOptions}
                            errors={errors}
                            register={register}
                            label={<>{__('Checklist valutazione Pre-Istruttoria', 'gepafin')}*
                                <span>{__('(almeno 1 elemento)', 'gepafin')}</span></>}
                        />

                        <div className="appPageSection">
                            <div className="appPageSection__actions">
                                <Button
                                    type="submit"
                                    label={__('Salva bozza', 'gepafin')} icon="pi pi-save" iconPos="right"/>
                                <Button
                                    type="button"
                                    onClick={openPreview}
                                    label={__('Anteprima beneficiario', 'gepafin')} icon="pi pi-eye" iconPos="right"/>
                                <Button
                                    type="button"
                                    onClick={openPreviewEvaluation}
                                    label={__('Anteprima pre-istruttoria', 'gepafin')} icon="pi pi-eye"
                                    iconPos="right"/>
                            </div>
                        </div>
                    </form>

                    <div className="appPageSection">
                        <h2>{__('Crea o modifica il Form compilabile dal Beneficiario', 'gepafin')}</h2>
                        <Button
                            type="button"
                            onClick={openBandoFormManagement}
                            label={__('Crea/modifica form', 'gepafin')}/>
                    </div>
                </>
                : <>
                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
                    <Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
                    <Skeleton width="100%" height="4rem" className="mb-8"></Skeleton>
                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
                    <Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
                    <Skeleton width="100%" height="4rem"></Skeleton>
                </>}
        </div>
    )
}

export default BandoEdit;