bflows-bandi-fe/src/pages/DomandaEditPreInstructor/components/EvaluationExtraFiles/index.js

import React, { useMemo, useState, useCallback, useEffect, useRef } from 'react';
import { useForm, useFieldArray } from 'react-hook-form';
import { isEmpty, head, pluck } from 'ramda';
import { __ } from '@wordpress/i18n';
import { klona } from 'klona';

// tools
import uniqid from '../../../../helpers/uniqid';

// components
import FormField from '../../../../components/FormField';
import { Button } from 'primereact/button';
import { Dialog } from 'primereact/dialog';
import { Toast } from 'primereact/toast';
import CompanyService from '../../../../service/company-service';
import FileSelect from '../../../../components/FormField/components/FileSelect';
import ApplicationService from '../../../../service/application-service';
import set404FromErrorResponse from '../../../../helpers/set404FromErrorResponse';
import { storeSet } from '../../../../store';

const EvaluationExtraFiles = ({
                                  sourceId,
                                  applicationId,
                                  companyId,
                                  sourceName,
                                  updateFn = () => {
                                  },
                                  updateCallbackFn = () => {
                                  },
                                  defaultValue = [],
                                  shouldDisable = false
                              }) => {
    const [chosen, setChosen] = useState('');
    const [isVisibleCompanyDocsDialog, setIsVisibleCompanyDocsDialog] = useState(false);
    const [companyDocs, setCompanyDocs] = useState([]);
    const [companyDocsSelected, setCompanyDocsSelected] = useState([]);
    const toast = useRef(null);
    const {
        control,
        handleSubmit,
        formState: { errors },
        setValue,
        register,
        trigger,
        getValues,
        watch
    } = useForm({
        defaultValues: useMemo(() => {
            return {
                items: defaultValue || []
            };
        }, [defaultValue]), mode: 'onChange'
    });
    const { fields, append, remove } = useFieldArray({
        control,
        name: 'items'
    });

    const watchFields = watch('items');

    const onSubmit = () => {
    }

    const doUpdateAfterFileUploaded = () => {
        const formData = getValues();
        updateFn(formData.items);
        updateCallbackFn(formData.items);
    }

    const addNew = () => {
        const uid = uniqid('f');
        const newItem = {
            fieldId: uid,
            nameValue: '',
            fileValue: []
        }
        append(newItem);
        setChosen(newItem.fieldId);
        trigger();
    };

    const setNewChosen = useCallback((id) => {
        const chosenObj = head(fields.filter(o => id === o.fieldId));
        if (chosenObj) {
            setChosen(chosen === id ? '' : id);
        }
    }, [fields, chosen]);

    const removeItem = useCallback((index) => {
        const chosenObj = klona(fields[index]);
        remove(index);
        if (chosen === chosenObj.fieldId) {
            setChosen('');
        }
        const formData = getValues();
        updateFn(formData.items);
        updateCallbackFn(formData.items);
    }, [fields, chosen]);

    const openCompanyArchive = () => {
        setIsVisibleCompanyDocsDialog(true);
    }

    const headerCompanyDocsDialog = () => {
        return <span>{__('Documenti aziendale', 'gepafin')}</span>;
    }

    const hideCompanyDocsDialog = () => {
        setIsVisibleCompanyDocsDialog(false);
        setCompanyDocsSelected([]);
    }

    const footerPreTecEvalDialog = useCallback(() => {
        return <div>
            <Button type="button" label={__('Annulla', 'gepafin')} onClick={hideCompanyDocsDialog} outlined/>
            <Button
                type="button"
                disabled={isEmpty(companyDocsSelected)}
                label={__('Aggiungi', 'gepafin')} onClick={doImportCompanyDocs}/>
        </div>
    }, [companyDocsSelected]);

    const doImportCompanyDocs = useCallback(() => {
        if (!isEmpty(companyDocsSelected)) {
            const ids = pluck('id', companyDocsSelected);
            ApplicationService.setApplicationDocuments(applicationId, setDocsCallback, errSetDocsCallback, [
                ['companyDocumentIds', ids]
            ])
        }
    }, [companyDocsSelected]);

    const setDocsCallback = (resp) => {
        if (resp.status === 'SUCCESS') {
            if (toast.current && resp.message) {
                toast.current.show({
                    severity: 'success',
                    summary: '',
                    detail: resp.message
                });
            }
        }
        setIsVisibleCompanyDocsDialog(false);
        setCompanyDocsSelected([]);
        storeSet('unsetAsyncRequest');

        setTimeout(() => {
            window.location.reload();
        }, 2500);
    }

    const errSetDocsCallback = (resp) => {
        if (toast.current && resp.message) {
            toast.current.show({
                severity: resp.status === 'SUCCESS' ? 'info' : 'error',
                summary: '',
                detail: resp.message
            });
        }
        setIsVisibleCompanyDocsDialog(false);
        setCompanyDocsSelected([]);
        set404FromErrorResponse(resp);
        storeSet('unsetAsyncRequest');
    }

    const getDocsCallback = (resp) => {
        if (resp.status === 'SUCCESS') {
            setCompanyDocs(resp.data);
        }
    }

    const errGetDocsCallback = (resp) => {
        if (toast.current && resp.message) {
            toast.current.show({
                severity: resp.status === 'SUCCESS' ? 'info' : 'error',
                summary: '',
                detail: resp.message
            });
        }
        set404FromErrorResponse(resp);
    }

    useEffect(() => {
        CompanyService.getCompanyDocuments(companyId, getDocsCallback, errGetDocsCallback, [
            ['documentType', 'COMPANY_DOCUMENT']
        ])
    }, [companyId]);

    return (
        <>
            <div className="fieldsRepeater">
                <form className="appForm" onSubmit={handleSubmit(onSubmit)}>
                    {watchFields
                        ? watchFields.map((o, index) => <div key={o.fieldId}
                                                             className="fieldsRepeater__panel p-panel p-component">
                                <div className="fieldsRepeater__heading p-panel p-panel-header">
                                    <span onClick={() => setNewChosen(o.fieldId)}>{o.nameValue}</span>
                                    <Button icon="pi pi-times"
                                            disabled={shouldDisable}
                                            outlined
                                            severity="danger"
                                            className="actionBtn"
                                            type="button"
                                            aria-label={__('Cancella', 'gepafin')}
                                            onClick={() => removeItem(index)}/>
                                </div>
                                <div className="fieldsRepeater__fields p-panel-content" data-hide={chosen !== o.fieldId}>
                                    <FormField
                                        type="textinput"
                                        disabled={shouldDisable}
                                        fieldName={`items.${index}.nameValue`}
                                        label={__('Titolo del file', 'gepafin')}
                                        control={control}
                                        errors={errors}
                                        defaultValue={o.nameValue}
                                        config={{ required: __('È obbligatorio', 'gepafin') }}
                                    />
                                    <FormField
                                        type="fileupload"
                                        disabled={isEmpty(o.nameValue) || shouldDisable}
                                        setDataFn={setValue}
                                        saveFormCallback={doUpdateAfterFileUploaded}
                                        fieldName={`items.${index}.fileValue`}
                                        label={__('File', 'gepafin')}
                                        control={control}
                                        register={register}
                                        errors={errors}
                                        defaultValue={o.fileValue ? o.fileValue : []}
                                        accept={[]}
                                        source={sourceName}
                                        sourceId={sourceId}
                                        multiple={false}
                                        deleteOnBackend={true}
                                        config={{ required: __('È obbligatorio', 'gepafin') }}
                                    />
                                </div>
                            </div>
                        ) : null}
                </form>
                <div style={{ display: 'flex', gap: '10px' }}>
                    <Button
                        className="fieldsRepeater__addNew"
                        outlined
                        type="button"
                        disabled={(watchFields && watchFields.filter(o => isEmpty(o.nameValue) || isEmpty(o.fileValue)).length > 0) || shouldDisable}
                        onClick={addNew}
                        label={__('Aggiungi nuovo file', 'gepafin')}
                    />
                    <Button
                        className="fieldsRepeater__addNew"
                        outlined
                        type="button"
                        disabled={(watchFields && watchFields.filter(o => isEmpty(o.nameValue) || isEmpty(o.fileValue)).length > 0) || shouldDisable}
                        onClick={openCompanyArchive}
                        label={__('Documenti aziendale', 'gepafin')}
                    />
                </div>
            </div>
            <Toast ref={toast}/>
            <Dialog
                visible={isVisibleCompanyDocsDialog}
                modal
                header={headerCompanyDocsDialog}
                footer={footerPreTecEvalDialog}
                style={{ maxWidth: '600px', width: '100%' }}
                onHide={hideCompanyDocsDialog}>
                <div className="appForm__field">
                    {/*<label
                        className={classNames({
                            'p-error': isEmpty(companyDocsSelected)
                        })}>
                        {__('Documenti', 'gepafin')}
                    </label>*/}
                    <FileSelect
                        fieldName="companyDocsSelected"
                        label={null}
                        errors={{}}
                        register={() => {}}
                        key={companyDocsSelected}
                        defaultValue={companyDocsSelected}
                        options={companyDocs}
                        sourceId="0"
                        source="DOCUMENT"
                        documentCategories={[]}
                        attachFilesCallback={(o) => {
                            setCompanyDocsSelected(prev => {
                                const newSelected = [...prev];
                                if (!newSelected.find(s => s.id === o.id)) {
                                    newSelected.push(o);
                                }
                                return newSelected;
                            })
                        }}
                    />
                </div>
            </Dialog>
        </>
    )
}

export default EvaluationExtraFiles;