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

// 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';

// components
import { Skeleton } from 'primereact/skeleton';
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 { klona } from 'klona';
import { useForm } from 'react-hook-form';
import FormField from '../../components/FormField';
import uniqid from '../../helpers/uniqid';
import { Editor } from 'primereact/editor';
import { TZDate } from '@date-fns/tz';
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 toast = useRef(null);
    const [formInitialData, setFormInitialData] = useState({});
    const {
        control,
        handleSubmit,
        formState: { errors, isValid },
        setValue,
        register,
        trigger,
        getValues,
        clearErrors
    } = useForm({
        defaultValues: useMemo(() => {
            return formInitialData;
        }, [formInitialData]), mode: 'onChange'
    });

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

    const getCallback = (data) => {
        if (data.status === 'SUCCESS') {
            setData(getFormattedData(data.data));
            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,
            //note: data.internalNote
        }

        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);
    }

    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>

            {!isAsyncRequest && !isEmpty(data)
                ? <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.map((o, i) => <li key={o.fieldId}>
                                        <span>{o.label}</span>
                                    </li>)}
                                </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}
                            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.map((o, i) => {
                                const test = {
                                    'updatedFormFields': [
                                        {
                                            'fieldId': 'a5867bdceb',
                                            'fieldValue': '136'
                                        },
                                        {
                                            'fieldId': 'ab0f00219b',
                                            'fieldValue': null
                                        }
                                    ]
                                }
                                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}
                                    type="fileupload"
                                    setDataFn={setValue}
                                    fieldName={o.fieldId}
                                    label={o.label}
                                    control={control}
                                    errors={errors}
                                    defaultValue={[]}
                                    accept={[]}
                                    doctype="document"
                                    register={register}
                                    sourceId={data.applicationId}
                                    source="application"
                                    multiple={true}
                                />
                            })}
                        </form>

                        <Button
                            style={{ marginTop: 30 }}
                            type="button"
                            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"
                                disabled={true}
                                outlined
                                label={__('Invia Sollecito', 'gepafin')}
                                icon="pi pi-send"
                            />
                            <Button
                                type="button"
                                onClick={openExtendResponseTimeDialog}
                                outlined
                                label={__('Estendi Scadenza', 'gepafin')}
                                icon="pi pi-stopwatch"
                            />
                            <Button
                                type="button"
                                onClick={doCloseAmendment}
                                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>
                            <Editor
                                value={data.internalNote}
                                placeholder={__('Digita qui il messagio', 'gepafin')}
                                headerTemplate={header}
                                onTextChange={(e) => updateNewAmendmentData(
                                    e.htmlValue,
                                    'internalNote'
                                )}
                                style={{ height: 80 * 3, width: '100%' }}
                            />
                        </div>
                    </div>

                </div>
                : <>
                    <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" className="mb-8"></Skeleton>
                    <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>
                </>}

            <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}
                               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}
                        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"
                        value={extendedTime}
                        showButtons
                        onChange={(e) => setExtendedTime(e.value)}/>
                </div>
            </Dialog>
        </div>
    )

}

export default SoccorsoEditPreInstructor;