import React, { useMemo, useRef } from 'react';
import { __ } from '@wordpress/i18n';

// store
import { storeSet, useStore } from '../../store';

// components
import { Messages } from 'primereact/messages';
import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
import FormField from '../../components/FormField';
import { Button } from 'primereact/button';
import { useForm } from 'react-hook-form';

// api
import UserService from '../../service/user-service';
import getDateFromISOstring from '../../helpers/getDateFromISOstring';

const Profile = () => {
    const isAsyncRequest = useStore().main.isAsyncRequest();
    const userData = useStore().main.userData();
    const infoMsgs = useRef(null);

    const {
        control,
        handleSubmit,
        formState: { errors },
        setValue
    } = useForm({
        defaultValues: useMemo(() => {
            return userData;
        }, [userData]),
        mode: 'onChange'
    });

    const onSubmit = (formData) => {
        infoMsgs.current.clear();
        storeSet.main.setAsyncRequest();

        UserService.updateUser(userData.id, formData, updateCallback, updateError);
    };

    const updateCallback = (data) => {
        if (data.status === 'SUCCESS') {
            //setData(getFormattedBandiData(data.data));
        }
        storeSet.main.unsetAsyncRequest();
    }

    const updateError = (data) => {
        set404FromErrorResponse(data);
        storeSet.main.unsetAsyncRequest();
    }

    return (
        <div className="appPage">
            <div className="appPage__pageHeader">
                <h1>{__('Profilo utente', 'gepafin')}</h1>
            </div>

            <div className="appPage__spacer"></div>
            <Messages ref={infoMsgs}/>

            <form className="appForm" onSubmit={handleSubmit(onSubmit)}>

                <div className="appPageSection">
                    <h2>{__('Informazioni personali', 'gepafin')}</h2>
                    <div className="appForm__cols">
                        <FormField
                            type="textinput"
                            disabled={true}
                            fieldName="firstName"
                            label={__('Nome', 'gepafin')}
                            control={control}
                            errors={errors}
                            config={{ required: __('È obbligatorio', 'gepafin') }}
                            placeholder="Francesco"
                        />

                        <FormField
                            type="textinput"
                            disabled={true}
                            fieldName="lastName"
                            label={__('Cognome', 'gepafin')}
                            control={control}
                            errors={errors}
                            config={{ required: __('È obbligatorio', 'gepafin') }}
                            placeholder="Moli"
                        />

                        <FormField
                            type="textinput"
                            disabled={true}
                            fieldName="codiceFiscale"
                            label={__('Codice fiscale', 'gepafin')}
                            control={control}
                            errors={errors}
                            config={{ required: __('È obbligatorio', 'gepafin') }}
                            placeholder="XXXXXXXX"
                        />
                    </div>
                    <div className="appForm__cols">
                        <FormField
                            type="textinput"
                            fieldName="email"
                            label={__('Email', 'gepafin')}
                            control={control}
                            errors={errors}
                            config={{ required: __('È obbligatorio', 'gepafin') }}
                            placeholder="user@example.com"
                        />

                        <FormField
                            type="textinput"
                            fieldName="phoneNumber"
                            label={__('Telefono', 'gepafin')}
                            control={control}
                            errors={errors}
                            config={{ required: __('È obbligatorio', 'gepafin') }}
                            placeholder="1234567"
                        />
                    </div>
                </div>

                <div className="appPageSection">
                    <h2>{__('Consensi', 'gepafin')}</h2>

                    <div className="appForm__switchFieldWrapper">
                        <FormField
                            type="switch"
                            fieldName="marketing"
                            label={''}
                            control={control}
                            errors={errors}
                            onLabel={''}
                            offLabel={''}
                        />
                        <div>
                            {__('Invio di materiale pubblicitario, vendita diretta, compimento di ricerche di mercato o comunicazione commerciale riguardanti promozione e vendita di prodotti e servizi della Gepafin, mediante modalità di contatto automatizzate (posta elettronica, PEC, messaggi tramite canali informatici, network ed applicazioni web) e tradizionali (come posta cartacea e chiamate telefoniche con operatore)', 'gepafin')}
                        </div>
                    </div>

                    <div className="appForm__switchFieldWrapper">
                        <FormField
                            type="switch"
                            fieldName="offers"
                            label={''}
                            control={control}
                            errors={errors}
                            onLabel={''}
                            offLabel={''}
                        />
                        <div>
                            {__('Elaborazione, in forma elettronica, dei dati relativi ai rapporti e servizi forniti, per l’analisi di comportamenti e preferenze della clientela, da utilizzare a scopo commerciale, per la individuazione ed offerta di prodotti e servizi di suo interesse', 'gepafin')}
                        </div>
                    </div>

                    <div className="appForm__switchFieldWrapper">
                        <FormField
                            type="switch"
                            fieldName="thirdParty"
                            label={''}
                            control={control}
                            errors={errors}
                            onLabel={''}
                            offLabel={''}
                        />
                        <div>
                            {__('Comunicazione dei miei dati ad altre società in ambito bancario, finanziario od assicurativo e enti pubblici che li tratteranno per invio di materiale pubblicitario, vendita diretta, compimento di ricerche di mercato o comunicazione commerciale riguardanti loro prodotti o servizi, mediante le modalità automatizzate e tradizionali di comunicazione sopra indicate', 'gepafin')}
                        </div>
                    </div>
                </div>

                <div className="appPageSection">
                    <h2>{__('Utenti Associati', 'gepafin')}</h2>
                    <div className="appForm__cols">
                        <FormField
                            type="select"
                            disabled={true}
                            fieldName="language"
                            defaultValue={'it'}
                            label={__('Lingua predefinita', 'gepafin')}
                            control={control}
                            errors={errors}
                            config={{ required: __('È obbligatorio', 'gepafin') }}
                            options={[
                                { label: __('Italiano', 'gepafin'), name: 'it' }
                            ]}
                        />

                        <FormField
                            type="select"
                            disabled={true}
                                fieldName="timezone"
                                defaultValue={'Europe/Rome'}
                                label={__('Fuso Orario', 'gepafin')}
                                control={control}
                                errors={errors}
                                config={{ required: __('È obbligatorio', 'gepafin') }}
                                options={[
                                    { label: __('Europe/Rome', 'gepafin'), name: 'Europe/Rome' }
                                ]}
                            />

                            <FormField
                                type="select"
                                disabled={true}
                                fieldName="dateformat"
                                defaultValue={'DD/MM/YY'}
                                label={__('Formato Data', 'gepafin')}
                                control={control}
                                errors={errors}
                                config={{ required: __('È obbligatorio', 'gepafin') }}
                                options={[
                                    { label: __('DD/MM/YY', 'gepafin'), name: 'DD/MM/YY' }
                                ]}
                            />
                        </div>
                    </div>

                    <div className="appPageSection">
                        <h2>{__('Sicurezza', 'gepafin')}</h2>
                        <div className="appForm__row">
                            <label>{__('Ultimo accesso', 'gepafin')}</label>
                            <span>{getDateFromISOstring(userData.lastLogin)}</span>
                        </div>
                    </div>

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

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

                    <div className="appPageSection">
                        <div className="appPageSection__actions">
                            <Button
                                disabled={isAsyncRequest}
                                label={__('Salva modifiche', 'gepafin')}
                                icon="pi pi-check" iconPos="right"/>
                        </div>
                    </div>
            </form>

        </div>
)

}

export default Profile;