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

// components
import { InputText } from 'primereact/inputtext';
import { InputTextarea } from 'primereact/inputtextarea';
import getBandoLabel from '../../helpers/getBandoLabel';
import { Button } from 'primereact/button';
import { Dropdown } from 'primereact/dropdown';
import { Menu } from 'primereact/menu';
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 Bando = () => {
    const { id } = useParams();
    const [data, setData] = useState({});
    const [isFormLoading, setIsFormLoading] = useState(true);
    const [selectedTemplate, setSelectedTemplate] = useState(null);
    const [templates, setTemplate] = useState(null);
    const {
        control,
        reset,
        handleSubmit,
        formState: { errors },
        getValues,
        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' }];
    const exampleOfFaqOptions = [
        { id: 2, question: 'Question 1?', answer: 'Lorem ipsum dolor' }
    ];
    const exampleOfChecklistOptions = [
        { id: 9, value: 'Requisiti di ammissibilità soddisfatti' },
        { id: 9, value: 'Documentazione completa' }
    ];

    const onPublish = () => {
        console.log('click onPublish');
    }

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

        setTimeout(() => {
            const data = 0 === bandoId
                ? {
                    status: 'draft',
                    name: '',
                    description: ''
                }
                : {
                    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);
            setIsFormLoading(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>

            {!isFormLoading
                ? <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>

            {!isFormLoading
                ? <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="description"
                        label={__('Descrizione', 'gepafin')}
                        control={control}
                        errors={errors}
                        defaultValue={data['description']}
                        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="datepickerrange"
                        fieldName="dates"
                        label={__('Dati di pubblicazione', 'gepafin')}
                        control={control}
                        errors={errors}
                        defaultValue={data['dates']}
                        config={{ required: __('È obbligatorio', 'gepafin') }}
                        minDate={minDateStart}
                    />

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

                    <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')}
                    />

                    <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={onPublish}
                                label={__('Pubblica', 'gepafin')} icon="pi pi-upload" iconPos="right"/>
                        </div>
                    </div>
                </form>
                : <>
                    <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 Bando;