import React, { useState, useEffect, useRef, useMemo } from 'react';
import { __ } from '@wordpress/i18n';
import { useNavigate, useParams } from 'react-router-dom';
import { is, isEmpty, isNil } from 'ramda';
import { wrap } from 'object-path-immutable';
import { klona } from 'klona';
import { useForm } from 'react-hook-form';

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

// api
import AmendmentsService from '../../service/amendments-service';
import CommunicationService from '../../service/communication-service';

// tools
import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
import getBandoLabel from '../../helpers/getBandoLabel';
import getDateFromISOstring from '../../helpers/getDateFromISOstring';
import renderHtmlContent from '../../helpers/renderHtmlContent';
import uniqid from '../../helpers/uniqid';

// components
import { Button } from 'primereact/button';
import BlockingOverlay from '../../components/BlockingOverlay';
import { Toast } from 'primereact/toast';
import { classNames } from 'primereact/utils';
import { Dialog } from 'primereact/dialog';
import { InputText } from 'primereact/inputtext';
import { InputTextarea } from 'primereact/inputtextarea';
import FormField from '../../components/FormField';
import { Editor } from 'primereact/editor';
import { InputNumber } from 'primereact/inputnumber';

const SoccorsoEditPreInstructor = () => {
    const isAsyncRequest = useStore().main.isAsyncRequest();
    const { id, amendmentId } = useParams();
    const navigate = useNavigate();
    const [data, setData] = useState({});
    const [comms, setComms] = useState([]);
    const [isVisibleNewCommDialog, setIsVisibleNewCommDialog] = useState(false);
    const [newCommData, setNewCommData] = useState({});
    const [isLoadingCommunication, setIsLoadingCommunication] = useState(false);
    const [isVisibleExtendTimeDialog, setIsVisibleExtendTimeDialog] = useState(false);
    const [extendedTime, setExtendedTime] = useState(3);
    const [isLoadingExtendingTime, setIsLoadingExtendingTime] = useState(false);
    const [isLoadingReminding, setIsLoadingReminding] = useState(false);
    const toast = useRef(null);
    const [formInitialData, setFormInitialData] = useState({});
    const {
        control,
        handleSubmit,
        formState: { errors },
        setValue,
        register,
        trigger,
        getValues
    } = useForm({
        defaultValues: useMemo(() => {
            return formInitialData;
        }, [formInitialData]), mode: 'onChange'
    });

    const goToEvaluationPage = () => {
        navigate(`/domande/${id}`);
    }

    const getCallback = (data) => {
        if (data.status === 'SUCCESS') {
            setData(getFormattedData(data.data));
            const formDataInitial = data.data.applicationFormFields.reduce((acc, cur) => {
                if (cur.fieldValue) {
                    acc[cur.fieldId] = cur.fieldValue;
                }
                return acc;
            }, {});
            setFormInitialData(formDataInitial);
            CommunicationService.getCommsByAmendmentId(data.data.id, getCommsCallback, errGetCommsCallback);
        }
        //storeSet.main.unsetAsyncRequest();
    }

    const errGetCallback = (data) => {
        if (toast.current && data.message) {
            toast.current.show({
                severity: 'error',
                summary: '',
                detail: data.message
            });
        }
        set404FromErrorResponse(data);
        storeSet.main.unsetAsyncRequest();
    }

    const getCommsCallback = (data) => {
        if (data.status === 'SUCCESS') {
            setComms(data.data.commentsList.map(o => getFormattedCommsData(o)));
        }
        storeSet.main.unsetAsyncRequest();
    }

    const errGetCommsCallback = (data) => {
        if (toast.current && data.message) {
            toast.current.show({
                severity: 'error',
                summary: '',
                detail: data.message
            });
        }
        set404FromErrorResponse(data);
        storeSet.main.unsetAsyncRequest();
    }

    const getFormattedData = (data) => {
        data.startDate = is(String, data.startDate) ? new Date(data.startDate) : (data.startDate ? data.startDate : '');
        data.expirationDate = is(String, data.expirationDate) ? new Date(data.expirationDate) : (data.expirationDate ? data.expirationDate : '');
        return data;
    };

    const getFormattedCommsData = (data) => {
        data.id = isNil(data.id) ? uniqid('id') : data.id;
        data.commentedDate = is(String, data.commentedDate) ? new Date(data.commentedDate) : (data.commentedDate ? data.commentedDate : '');
        data.createdDate = is(String, data.createdDate) ? new Date(data.createdDate) : (data.createdDate ? data.createdDate : '');
        data.updatedDate = is(String, data.updatedDate) ? new Date(data.updatedDate) : (data.updatedDate ? data.updatedDate : '');
        return data;
    };

    const headerNewComDialog = () => {
        return <span>{__('Aggiungi comunicazione', 'gepafin')}</span>
    }

    const hideNewComDialog = () => {
        setIsVisibleNewCommDialog(false);
        setNewCommData({
            title: '',
            comment: ''
        });
    }

    const footerNewComDialog = () => {
        return <div>
            <Button type="button" label={__('Anulla', 'gepafin')} onClick={hideNewComDialog} outlined/>
            <Button
                type="button"
                disabled={isLoadingCommunication || isEmpty(newCommData.title) || isEmpty(newCommData.comment)}
                label={__('Invia', 'gepafin')} onClick={createCommunication}/>
        </div>
    }

    const openNewCommDialog = () => {
        setIsVisibleNewCommDialog(true);
        setNewCommData({
            title: '',
            comment: ''
        });
    }

    const updateNewCommData = (value, path) => {
        const newData = wrap(newCommData).set(path.split('.'), value).value();
        setNewCommData(newData);
    }

    const renderHeader = () => {
        return (
            <span className="ql-formats">
                <button className="ql-bold" aria-label="Bold"></button>
                <button className="ql-italic" aria-label="Italic"></button>
                <button className="ql-underline" aria-label="Underline"></button>
                <button className="ql-link" aria-label="Link"></button>
                <button className="ql-list" value="ordered"></button>
                <button className="ql-header" value="2"></button>
                <button className="ql-header" value="3"></button>
                <button className="ql-blockquote"></button>
                <button className="ql-list" value="bullet"></button>
                <button className="ql-indent" value="-1"></button>
                <button className="ql-indent" value="+1"></button>
            </span>
        );
    };

    const header = renderHeader();

    const updateNewAmendmentData = (value, path) => {
        const newData = wrap(data).set(path.split('.'), value).value();
        setData(newData);
    }

    const createCommunication = () => {
        setIsLoadingCommunication(true);
        CommunicationService.createCommunication(amendmentId, newCommData, createCommunicationCallback, errCreateCommunicationCallback);
    }

    const createCommunicationCallback = (data) => {
        if (data.status === 'SUCCESS') {
            if (toast.current) {
                toast.current.show({
                    severity: 'success',
                    summary: '',
                    detail: data.message
                });
            }
            setComms([...comms, getFormattedCommsData(data.data)])
            setIsVisibleNewCommDialog(false);
        }
        setIsLoadingCommunication(false);
    }

    const errCreateCommunicationCallback = (data) => {
        if (toast.current && data.message) {
            toast.current.show({
                severity: 'error',
                summary: '',
                detail: data.message
            });
        }
        set404FromErrorResponse(data);
        setIsLoadingCommunication(false);
    }

    const onSubmit = () => {
    };

    const doUpdateAmendment = () => {
        trigger();
        let formValues = klona(getValues());
        const newFormValues = Object.keys(formValues)
            .reduce((acc, cur) => {
                let fieldVal = formValues[cur];

                fieldVal = isEmpty(fieldVal) ? null : fieldVal;
                fieldVal = is(Array, fieldVal) ? fieldVal.map(o => o.id).join(',') : null;

                acc.push({
                    'fieldId': cur,
                    'fieldValue': fieldVal
                });
                return acc;
            }, []);

        const submitData = {
            updatedFormFields: newFormValues,
        }

        storeSet.main.setAsyncRequest();
        AmendmentsService.updateSoccorso(amendmentId, submitData, updateAmendmentCallback, errUpdateAmendmentCallback);
    }

    const updateAmendmentCallback = (data) => {
        if (data.status === 'SUCCESS') {
            if (toast.current) {
                toast.current.show({
                    severity: 'success',
                    summary: '',
                    detail: data.message
                });
            }
        }
        storeSet.main.unsetAsyncRequest();
    }

    const errUpdateAmendmentCallback = (data) => {
        if (toast.current && data.message) {
            toast.current.show({
                severity: 'error',
                summary: '',
                detail: data.message
            });
        }
        set404FromErrorResponse(data);
        storeSet.main.unsetAsyncRequest();
    }

    const doCloseAmendment = () => {
        const submitData = {
            internalNote: data.internalNote
        }
        storeSet.main.setAsyncRequest();
        AmendmentsService.closeSoccorso(amendmentId, submitData, closeAmendmentCallback, errCloseAmendmentCallback);
    }

    const closeAmendmentCallback = (data) => {
        if (data.status === 'SUCCESS') {
            if (toast.current) {
                toast.current.show({
                    severity: 'success',
                    summary: '',
                    detail: data.message
                });
            }
            if (data.data.status) {
                updateNewAmendmentData(data.data.status, 'status')
            }
        }
        storeSet.main.unsetAsyncRequest();
    }

    const errCloseAmendmentCallback = (data) => {
        if (toast.current && data.message) {
            toast.current.show({
                severity: 'error',
                summary: '',
                detail: data.message
            });
        }
        set404FromErrorResponse(data);
        storeSet.main.unsetAsyncRequest();
    }

    const headerExtendRespDialog = () => {
        return <span>{__('Estendi scadenza', 'gepafin')}</span>
    }

    const hideExtendRespDialog = () => {
        setIsVisibleExtendTimeDialog(false);
    }

    const footerExtendRespDialog = () => {
        return <div>
            <Button type="button" label={__('Anulla', 'gepafin')} onClick={hideExtendRespDialog} outlined/>
            <Button
                type="button"
                disabled={isLoadingExtendingTime || isEmpty(extendedTime)}
                label={__('Invia', 'gepafin')} onClick={doExtendTimeResponse}/>
        </div>
    }

    const openExtendResponseTimeDialog = () => {
        setIsVisibleExtendTimeDialog(true);
        setExtendedTime(3);
    }

    const doExtendTimeResponse = () => {
        setIsLoadingExtendingTime(true);
        AmendmentsService.extendSoccorso(amendmentId, extendedTime, extendCallback, errExtendCallback);
    }

    const extendCallback = (data) => {
        if (data.status === 'SUCCESS') {
            if (toast.current) {
                toast.current.show({
                    severity: 'success',
                    summary: '',
                    detail: data.message
                });
            }
            setIsVisibleExtendTimeDialog(false);
        }
        setIsLoadingExtendingTime(false);
    }

    const errExtendCallback = (data) => {
        if (toast.current && data.message) {
            toast.current.show({
                severity: 'error',
                summary: '',
                detail: data.message
            });
        }
        set404FromErrorResponse(data);
        setIsLoadingExtendingTime(false);
    }

    const sendReminder = () => {
        setIsLoadingReminding(true);
        AmendmentsService.sendReminderForSoccorso(amendmentId, reminderCallback, errReminderCallback)
    }

    const reminderCallback = (data) => {
        if (data.status === 'SUCCESS') {
            if (toast.current) {
                toast.current.show({
                    severity: 'success',
                    summary: '',
                    detail: data.message
                });
            }
        }
        setIsLoadingReminding(false);
    }

    const errReminderCallback = (data) => {
        if (toast.current && data.message) {
            toast.current.show({
                severity: 'error',
                summary: '',
                detail: data.message
            });
        }
        set404FromErrorResponse(data);
        setIsLoadingReminding(false);
    }

    useEffect(() => {
        const parsedSoccorsoId = parseInt(amendmentId);
        const soccorsoEntityId = !isNaN(parsedSoccorsoId) ? parsedSoccorsoId : 0;

        AmendmentsService.getSoccorsoById(getCallback, errGetCallback, [['id', soccorsoEntityId]]);
    }, [amendmentId]);

    return (
        <div className="appPage">
            <div className="appPage__pageHeader">
                <h1>{__('Soccorso Istruttorio - Dettagli', 'gepafin')}</h1>
            </div>

            <div className="appPage__spacer"></div>
            <Toast ref={toast}/>
            <BlockingOverlay shouldDisplay={isAsyncRequest}/>

            <div className="appPageSection__row">
                <Button
                    type="button"
                    outlined
                    onClick={goToEvaluationPage}
                    label={__('Indietro', 'gepafin')}
                    icon="pi pi-arrow-left" iconPos="left"/>
            </div>

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

            <div className="appPage__content">
                <div className="appPageSection__withBorder columns">
                    <p className="appPageSection__pMeta">
                        <span>{__('ID domanda', 'gepafin')}</span>
                        <span>{data.applicationId}</span>
                    </p>
                    <p className="appPageSection__pMeta">
                        <span>{__('Bando', 'gepafin')}</span>
                        <span>{data.callName}</span>
                    </p>
                    <p className="appPageSection__pMeta">
                        <span>{__('Beneficiario', 'gepafin')}</span>
                        <span>{data.beneficiaryName}</span>
                    </p>
                    <p className="appPageSection__pMeta">
                        <span>{__('Inizio', 'gepafin')}</span>
                        <span>{getDateFromISOstring(data.startDate)}</span>
                    </p>
                    <p className="appPageSection__pMeta">
                        <span>{__('Scadenza', 'gepafin')}</span>
                        <span>{getDateFromISOstring(data.expirationDate)}</span>
                    </p>
                    <p className="appPageSection__pMeta">
                        <span>{__('Stato', 'gepafin')}</span>
                        <span>{getBandoLabel(data.status)}</span>
                    </p>
                </div>

                <div className="appPageSection">
                    <h2>{__('Dettagli Richiesta', 'gepafin')}</h2>
                    <div className="appPageSection columns">
                        <div>
                            <h3>{__('Documenti Richiesti', 'gepafin')}</h3>
                            <ol className="appPageSection__list">
                                {data.formFields
                                    ? data.formFields.map((o, i) => <li key={o.fieldId} style={{ flexDirection: 'row' }}>
                                    <span>{o.label}</span>
                                </li>) : null}
                            </ol>
                        </div>
                        <div>
                            <h3>{__('Note e spiegazioni', 'gepafin')}</h3>
                            <div className="appPageSection__withBorder grey ql-editor"
                                 style={{ minHeight: '200px' }}>
                                {renderHtmlContent(data.note)}
                            </div>
                        </div>

                    </div>
                </div>

                <div className="appPageSection">
                    <h2>{__('Comunicazioni', 'gepafin')}</h2>
                    <table className="myTable">
                        <thead className="myThead">
                        <tr>
                            <th style={{ width: 250 }}>{__('Data', 'gepafin')}</th>
                            <th>{__('Comunicazione', 'gepafin')}</th>
                        </tr>
                        </thead>
                        <tbody className="myTbody">
                        {!isNil(comms) && !isEmpty(comms)
                            ? comms.map((o, i) => <tr key={o.id}>
                                <td valign="top">
                                    {getDateFromISOstring(o.commentedDate)}
                                </td>
                                <td>
                                    <h3>{o.title}</h3>
                                    <p>{o.comment}</p>
                                </td>
                            </tr>)
                            : <tr>
                                <td>-</td>
                                <td>-</td>
                            </tr>}
                        </tbody>
                    </table>

                    <Button
                        style={{ marginTop: 30 }}
                        onClick={openNewCommDialog}
                        disabled={data.status === 'CLOSE'}
                        type="button"
                        label={__('Aggiungi Comunicazione', 'gepafin')}
                        icon="pi pi-plus" iconPos="right"/>
                </div>

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

                    <form className="appForm" onSubmit={handleSubmit(onSubmit)}>
                        {data.formFields
                            ? data.formFields.map((o, i) => {
                            /*const thisField = head(test.updatedFormFields.filter(j => j.fieldId === o.fieldId));
                            const value = pathOr({}, ['fieldValue'], thisField);
                            console.log('value', value, o.fieldId);*/
                            return <FormField
                                key={o.fieldId}
                                disabled={data.status === 'CLOSE'}
                                type="fileupload"
                                setDataFn={setValue}
                                fieldName={o.fieldId}
                                label={o.label}
                                control={control}
                                errors={errors}
                                defaultValue={formInitialData[o.fieldId] ? formInitialData[o.fieldId] : []}
                                accept={[]}
                                doctype="document"
                                register={register}
                                sourceId={data.applicationId}
                                source="application"
                                multiple={true}
                            />
                        }) : null}
                    </form>

                    <Button
                        style={{ marginTop: 30 }}
                        type="button"
                        disabled={data.status === 'CLOSE'}
                        onClick={doUpdateAmendment}
                        label={__('Aggiorna', 'gepafin')}/>
                </div>

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

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

                <div className="appPageSection">
                    <div className="appPageSection__actions">
                        <Button
                            type="button"
                            onClick={sendReminder}
                            disabled={isLoadingReminding || data.status === 'CLOSE'}
                            outlined
                            label={__('Invia Sollecito', 'gepafin')}
                            icon="pi pi-send"
                        />
                        <Button
                            type="button"
                            onClick={openExtendResponseTimeDialog}
                            disabled={isLoadingExtendingTime || data.status === 'CLOSE'}
                            outlined
                            label={__('Estendi Scadenza', 'gepafin')}
                            icon="pi pi-stopwatch"
                        />
                        <Button
                            type="button"
                            onClick={doCloseAmendment}
                            disabled={isAsyncRequest || data.status === 'CLOSE'}
                            label={__('Chiudi Soccorso Istruttorio', 'gepafin')}
                            icon="pi pi-times" iconPos="right"/>
                    </div>
                </div>

                <div className="appForm__field" style={{ marginTop: '-40px' }}>
                    <label>{__('Note Interne', 'gepafin')}</label>
                    <div style={{position: 'relative'}}>
                        <BlockingOverlay shouldDisplay={data.status === 'CLOSE'}/>
                        <Editor
                            value={data.internalNote}
                            readOnly={data.status === 'CLOSE'}
                            placeholder={__('Digita qui il messagio', 'gepafin')}
                            headerTemplate={header}
                            onTextChange={(e) => updateNewAmendmentData(
                                e.htmlValue,
                                'internalNote'
                            )}
                            style={{ height: 80 * 3, width: '100%' }}
                        />
                    </div>
                </div>

            </div>

            <Dialog
                visible={isVisibleNewCommDialog}
                modal
                header={headerNewComDialog}
                footer={footerNewComDialog}
                style={{ maxWidth: '600px', width: '100%' }}
                onHide={hideNewComDialog}>
                <div className="appForm__field">
                    <label
                        className={classNames({ 'p-error': isEmpty(newCommData.title) })}>
                        {__('Titolo', 'gepafin')}*
                    </label>
                    <InputText value={newCommData.title}
                               disabled={data.status === 'CLOSE'}
                               invalid={isEmpty(newCommData.title)}
                               onChange={(e) => updateNewCommData(e.target.value, 'title')}/>

                    <label
                        className={classNames({ 'p-error': isEmpty(newCommData.comment) })}>
                        {__('Contenuto', 'gepafin')}*
                    </label>
                    <InputTextarea
                        value={newCommData.comment}
                        disabled={data.status === 'CLOSE'}
                        rows={5} cols={30}
                        invalid={isEmpty(newCommData.comment)}
                        onChange={(e) => updateNewCommData(e.target.value, 'comment')}/>
                </div>
            </Dialog>

            <Dialog
                visible={isVisibleExtendTimeDialog}
                modal
                header={headerExtendRespDialog}
                footer={footerExtendRespDialog}
                style={{ maxWidth: '600px', width: '100%' }}
                onHide={hideExtendRespDialog}>
                <div className="appForm__field">
                    <label
                        className={classNames({ 'p-error': isEmpty(extendedTime) })}>
                        {__('Giorni', 'gepafin')}*
                    </label>
                    <InputNumber
                        keyfilter="int"
                        disabled={data.status === 'CLOSE'}
                        value={extendedTime}
                        showButtons
                        onChange={(e) => setExtendedTime(e.value)}/>
                </div>
            </Dialog>
        </div>
    )

}

export default SoccorsoEditPreInstructor;