import React, { useCallback, useState, useMemo, useEffect } from 'react';
import { ConfigService } from '../../../../../configService';
import { EmptyStateDisplay, LinearProgress, SideSheet } from '../../../../../UI';
import { TransactionNote } from './TransactionNote';
import { useTranslation } from 'react-i18next';
import { makeStyles } from '@material-ui/core';
import { apiMutate, useAxiosMutate } from '../../../../../utilities/useAxiosMutate';
import { TransactionNoteForm } from './TransactionNoteForm';
const useStyles = makeStyles((theme) => ({
    notes: {
        display: 'flex',
        flexDirection: 'column',
        gap: theme.spacing(1)
    }
}));
export const TransactionNotes = (props) => {
    const { businessObjectKey, refreshNotes, setRefreshNotes, noteTypes, fetchNoteTypesLoading } = props;
    const [openSideSheet, setOpenSideSheet] = useState(false);
    const [selectedNote, setSelectedNote] = useState(null);
    const [noteList, setNoteList] = useState([]);
    const classes = useStyles();
    const { t } = useTranslation();
    const [isLoading, setIsLoading] = useState(false);
    const noteFileForSearchObj = useMemo(() => {
        return {
            eagerLoad: true,
            pageNumber: 0,
            pageSize: 100,
            filterElements: [
                {
                    searchField: 'entityBusinessKey',
                    searchValue: businessObjectKey,
                    searchOperator: '='
                }
            ],
            getAll: true
        };
    }, [businessObjectKey]);
    const [{ data: noteFiledFor, loading: fetchNoteFiledForLoading }, fetchNoteFiledFor] = useAxiosMutate(ConfigService.productV1ApiUrl, `UdpNoteFiledFor/search`, {
        method: 'post',
        data: noteFileForSearchObj
    });
    const handleViewNote = useCallback((note) => {
        setSelectedNote(note);
        setOpenSideSheet(true);
    }, []);
    const handleCloseSideSheet = useCallback(() => {
        setOpenSideSheet(false);
        setSelectedNote(null);
    }, []);
    useEffect(() => {
        fetchNoteFiledFor();
    }, [fetchNoteFiledFor]);
    useEffect(() => {
        if (refreshNotes) {
            fetchNoteFiledFor();
            // eslint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent
            setRefreshNotes(false);
        }
    }, [fetchNoteFiledFor, refreshNotes, setRefreshNotes]);
    useEffect(() => {
        var _a, _b;
        if (!fetchNoteFiledForLoading && ((_a = noteFiledFor === null || noteFiledFor === void 0 ? void 0 : noteFiledFor.pageList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
            // eslint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent
            const noteIds = (_b = noteFiledFor === null || noteFiledFor === void 0 ? void 0 : noteFiledFor.pageList) === null || _b === void 0 ? void 0 : _b.map((obj) => obj === null || obj === void 0 ? void 0 : obj.noteID).join(',');
            const searchObj = {
                eagerLoad: true,
                pageNumber: 0,
                pageSize: 100,
                filterElements: [
                    {
                        searchField: 'iD',
                        searchValue: noteIds,
                        searchOperator: 'IN'
                    }
                ],
                getAll: true
            };
            setIsLoading(true);
            apiMutate(ConfigService.productV1ApiUrl, `UdpNote/search`, {
                method: 'post',
                data: searchObj
            }, {})
                .then((resp) => {
                var _a;
                if (resp && resp.data) {
                    setNoteList((_a = resp.data) === null || _a === void 0 ? void 0 : _a.pageList);
                }
                else {
                    setNoteList([]);
                }
            })
                .finally(() => {
                setIsLoading(false);
            });
        }
        else {
            setNoteList([]);
        }
    }, [fetchNoteFiledForLoading, noteFiledFor, setIsLoading]);
    return (React.createElement("div", null, React.createElement("div", { className: classes.notes }, isLoading || fetchNoteFiledForLoading ? (React.createElement("div", null, React.createElement(LinearProgress, null))) : (noteList === null || noteList === void 0 ? void 0 : noteList.length) > 0 ? (noteList.map((note, index) => (React.createElement(TransactionNote, { key: index, note: note, onClick: () => handleViewNote(note) })))) : (React.createElement("div", null, React.createElement(EmptyStateDisplay, { primaryText: "No Notes" })))), React.createElement(SideSheet, { title: t('View Note'), width: 600, open: openSideSheet, onClose: handleCloseSideSheet }, React.createElement("div", null, React.createElement(TransactionNoteForm, { initialValues: selectedNote, businessObjectKey: businessObjectKey, viewOnly: true, noteTypes: noteTypes, fetchNoteTypeLoading: fetchNoteTypesLoading })))));
};
//# sourceMappingURL=TransactionNotes.js.map