import React, { useEffect, useMemo, useRef, useState } from 'react';
import { __ } from '@wordpress/i18n';
import { isEmpty, isNil, pathOr, head } from 'ramda';
import { klona } from 'klona';
import { wrap } from 'object-path-immutable';

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

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

// api
import CompanyService from '../../service/company-service';

// tools
import { isPIVA, isCodiceFiscale, isEmail, isEmailPEC } from '../../helpers/validators';
import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
import FileuploadStandalone from '../../components/FileuploadStandalone';

const ProfileCompany = () => {
    const isAsyncRequest = useStore().main.isAsyncRequest();
    const companies = useStore().main.companies();
    const infoMsgs = useRef(null);
    const [formInitialData, setFormInitialData] = useState({});
    const [delegaData, setDelegaData] = useState({});
    const [delega, setDelega] = useState({});
    const { delegaFirstName = '', delegaLastName = '', delegaCodiceFiscale = '' } = delegaData;

    const {
        control,
        handleSubmit,
        formState: { errors },
        setValue,
        getValues,
        watch,
        register
    } = useForm({
        defaultValues: useMemo(() => {
            return formInitialData;
        }, [formInitialData]),
        mode: 'onChange'
    });
    const values = getValues();
    const emptyValues = Object.values(values).filter(v => isEmpty(v) || isNil(v)).length;
    const isLegalRepresentant = watch('isLegalRepresentant')

    const setEmptyValues = () => {
        const formData = {
            cap: '',
            pec: '',
            email: '',
            city: '',
            codiceFiscale: '',
            address: '',
            companyName: ''
        }
        Object.keys(formData).map(k => setValue(k, formData[k]));
    }

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

        if (isNil(formData.id)) {
            CompanyService.createCompany(formData, updateCallback, updateError);
        } else {
            CompanyService.updateCompany(formData.id, formData, updateCallback, updateError);
        }
    };

    const updateCallback = (data) => {
        if (data.status === 'SUCCESS') {
            const company = klona(data.data);
            const companies = storeGet.main.companies();
            const existingCompany = head(companies.filter(o => o.id === company.id));
            let newCompanies = [];

            if (existingCompany) {
                newCompanies = companies.map(o => o.id === company.id ? company : o)
            } else {
                newCompanies = [...companies, company];
                storeSet.main.chosenCompanyId(company.id);
            }

            storeSet.main.companies(newCompanies);
        }
        storeSet.main.unsetAsyncRequest();
    }

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

    const checkVatNumber = (e) => {
        infoMsgs.current.clear();
        const isValid = isPIVA(e.target.value);

        if (isValid) {
            storeSet.main.setAsyncRequest();
            CompanyService.checkVat(checkVatCallback, errCheckVatCallback, [['vatNumber', e.target.value]])
        } else {
            setEmptyValues();
        }
    }

    const checkVatCallback = (data) => {
        if (data.status === 'SUCCESS') {
            const resp = data.data.data;
            if (!isEmpty(resp)) {
                const {
                    cap, cf, denominazione, piva, indirizzo, comune, dettaglio: { pec }
                } = resp;

                const formData = {
                    cap,
                    pec,
                    email: pec,
                    city: comune,
                    codiceFiscale: cf,
                    address: indirizzo,
                    vatNumber: piva,
                    companyName: denominazione
                }
                Object.keys(formData).map(k => setValue(k, formData[k]));
            }
            //setData(getFormattedBandiData(data.data));
        } else {
            setEmptyValues();
        }
        storeSet.main.unsetAsyncRequest();
    }

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

    const setDelegaFieldValue = (value, name) => {
        const newDelegaData = wrap(delegaData).set([name], value).value();
        setDelegaData(newDelegaData)
    }

    const setDelegaFile = (data) => {
        console.log('setDelegaFile', data)
        setDelega(data);
    }

    useEffect(() => {
        const newFormData = klona(formInitialData);
        Object.keys(newFormData).map(v => setValue(v, newFormData[v]));
    }, [formInitialData]);

    useEffect(() => {
        const chosenCompany = pathOr({}, [0], companies);
        setFormInitialData(chosenCompany);
    }, [companies]);

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

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

            <form id="companyForm" className="appForm" onSubmit={handleSubmit(onSubmit)}>
                <BlockingOverlay shouldDisplay={isAsyncRequest}/>
                <div className="appPageSection">
                    <h2>{__('Informazioni aziendali', 'gepafin')}</h2>
                    <div className="appForm__cols">
                        <FormField
                            type="textinput"
                            disabled={true}
                            fieldName="companyName"
                            label={__('Ragione Sociale', 'gepafin')}
                            control={control}
                            errors={errors}
                            config={{ required: __('È obbligatorio', 'gepafin') }}
                            placeholder="Nome di azienda"
                        />
                    </div>

                    <div className="appForm__cols">
                        <FormField
                            type="textinput"
                            fieldName="vatNumber"
                            disabled={!isNil(formInitialData.id)}
                            label={__('P.IVA', 'gepafin')}
                            onBlurFn={checkVatNumber}
                            control={control}
                            errors={errors}
                            config={{ required: __('È obbligatorio', 'gepafin') }}
                        />

                        <FormField
                            type="textinput"
                            disabled={true}
                            fieldName="codiceFiscale"
                            label={__('Codice fiscale', 'gepafin')}
                            control={control}
                            errors={errors}
                            config={{ required: __('È obbligatorio', 'gepafin') }}
                        />
                    </div>

                    <div className="appForm__cols">
                        <FormField
                            type="textinput"
                            disabled={isNil(formInitialData.id)}
                            fieldName="pec"
                            label={__('Email PEC', 'gepafin')}
                            control={control}
                            errors={errors}
                            config={{
                                required: __('È obbligatorio', 'gepafin'),
                                validate: {
                                    isEmailPEC
                                }
                            }}
                        />

                        <FormField
                            type="textinput"
                            disabled={true}
                            fieldName="email"
                            label={__('Email', 'gepafin')}
                            control={control}
                            errors={errors}
                            config={{
                                required: __('È obbligatorio', 'gepafin'),
                                validate: {
                                    isEmail
                                }
                            }}
                        />

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

                    <div className="appForm__cols">
                        <FormField
                            type="textinput"
                            disabled={true}
                            fieldName="address"
                            label={__('Indirizzo', 'gepafin')}
                            control={control}
                            errors={errors}
                            config={{ required: __('È obbligatorio', 'gepafin') }}
                        />

                        <FormField
                            type="textinput"
                            disabled={true}
                            fieldName="city"
                            label={__('Città', 'gepafin')}
                            control={control}
                            errors={errors}
                            config={{ required: __('È obbligatorio', 'gepafin') }}
                        />

                        <FormField
                            type="textinput"
                            disabled={true}
                            fieldName="cap"
                            label={__('CAP', 'gepafin')}
                            control={control}
                            errors={errors}
                            config={{ required: __('È obbligatorio', 'gepafin') }}
                        />
                    </div>

                    <div className="appForm__cols">
                        <FormField
                            type="textinput"
                            disabled={isNil(formInitialData.id)}
                            fieldName="contactName"
                            label={__('Nome di referente aziendale', 'gepafin')}
                            control={control}
                            errors={errors}
                            config={{ required: __('È obbligatorio', 'gepafin') }}
                        />

                        <FormField
                            type="textinput"
                            fieldName="contactEmail"
                            label={__('Email di referente aziendale', 'gepafin')}
                            control={control}
                            errors={errors}
                            config={{
                                required: __('È obbligatorio', 'gepafin'),
                                validate: {
                                    isEmail
                                }
                            }}
                        />

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

                <div className="appPageSection">
                    <FormField
                        type="switch"
                        fieldName="isLegalRepresentant"
                        label={__('Sei il Rapprentante Legale dell’azienda?', 'gepafin')}
                        control={control}
                        errors={errors}
                        onLabel={__('Si', 'gepafin')}
                        offLabel={__('No', 'gepafin')}
                    />
                </div>
            </form>

            {!isLegalRepresentant
                ? <div className="appForm__delegaForm">
                    <div className="appForm__delegaFormHeader">
                        <legend>{__('Compilazione Delega', 'gepafin')}</legend>
                        <p className="appForm__delegaFormText">{__('Per procedere come delegato, compila il form seguente, scarica il documento della delega, fallo firmare dal rappresentante legale e ricaricalo.', 'gepafin')}</p>
                    </div>

                    <div className="appForm__cols">
                        <div className="appForm__field">
                            <label htmlFor="delegaFirstName">
                                {__('Nome del rappresentante legale', 'gepafin')}
                                <span className="appForm__field--required">*</span>
                            </label>
                            <InputText
                                id="delegaFirstName"
                                value={delegaFirstName}
                                onChange={(e) => setDelegaFieldValue(e.target.value, 'delegaFirstName')}/>
                        </div>

                        <div className="appForm__field">
                            <label htmlFor="delegaLastName">
                                {__('Cognome del rappresentante legale', 'gepafin')}
                                <span className="appForm__field--required">*</span>
                            </label>
                            <InputText
                                id="delegaLastName"
                                value={delegaLastName}
                                onChange={(e) => setDelegaFieldValue(e.target.value, 'delegaLastName')}/>
                        </div>

                        <div className="appForm__field">
                            <label htmlFor="delegaCodiceFiscale">
                                {__('Codice fiscale del rappresentante legale', 'gepafin')}
                                <span className="appForm__field--required">*</span>
                            </label>
                            <InputText
                                id="delegaCodiceFiscale"
                                value={delegaCodiceFiscale}
                                onChange={(e) => setDelegaFieldValue(e.target.value, 'delegaCodiceFiscale')}/>
                        </div>
                    </div>

                    <div>
                        <Button
                            disabled={isEmpty(delegaCodiceFiscale) || isEmpty(delegaFirstName) || isEmpty(delegaLastName)}
                            type="button"
                            label={__('Genera documento Delega', 'gepafin')}
                            icon="pi pi-check" iconPos="right"/>
                    </div>

                    <div className="appForm__field">
                        <label htmlFor="delega">
                            {__('Carica documento Delega Firmato', 'gepafin')}
                            <span className="appForm__field--required">*</span>
                        </label>
                        <FileuploadStandalone
                            setDataFn={setDelegaFile}
                            fieldName="delega"
                            defaultValue={[delega]}
                            accept={['']}
                            chooseLabel={__('Aggiungi documento', 'gepafin')}
                            multiple={false}
                            doctype="document"
                            sourceId={formInitialData.id}
                            source="call"
                        />
                    </div>

                    <div className="appForm__delegaFormActions">
                        <Button
                            type="button"
                            disabled={true}
                            outlined
                            onClick={() => {
                            }}
                            label={__('Visualizza delega', 'gepafin')} icon="pi pi-eye" iconPos="right"/>
                        <Button
                            type="button"
                            disabled={true}
                            outlined
                            onClick={() => {
                            }}
                            label={__('Sostituisci delega', 'gepafin')} icon="pi pi-sync" iconPos="right"/>
                    </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
                        form="companyForm"
                        /*disabled={isAsyncRequest || emptyValues || values.id}*/
                        label={__('Salva modifiche', 'gepafin')}
                        icon="pi pi-check" iconPos="right"/>
                </div>
            </div>

        </div>
    )

}

export default ProfileCompany;