import React, { useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import ReactJsonView from '@microlink/react-json-view';
import { Divider, UdpTabs } from '../../../../../UI/index.ts';
import { Typography } from '../../../../../UI/dataDisplay/typography/index.ts';
import './TransactionChangeLog.css';
const VIEW_MODES = {
    SUMMARY: 'summary',
    RAW: 'raw'
};
const KEYS_TO_IGNORE = [
    'businessObjectKey',
    'id',
    'rfirfiProjectContact',
    'udpTags'
];
const LABELS = {
    FIELD: 'Field',
    PREVIOUS: 'Previous',
    CURRENT: 'Current',
    WAS: 'Was',
    NOW: 'Now',
    EMPTY: 'Empty',
    CHANGE_LOG: 'Change log',
    SUMMARY: 'Summary',
    RAW_JSON: 'Raw JSON'
};
const SummaryView = ({ changes, t }) => {
    return (React.createElement(React.Fragment, null, React.createElement("div", { className: "tcl__grid-primary-headers" }, React.createElement(Typography, { variant: "inherit" }, t(LABELS.FIELD)), React.createElement(Typography, { variant: "inherit" }, t(LABELS.PREVIOUS)), React.createElement(Typography, { variant: "inherit" }, t(LABELS.CURRENT))), changes.map((item) => (React.createElement("div", { key: item.field, className: "tcl__row" }, React.createElement("div", { className: "tcl__grid-field" }, React.createElement("span", { className: "tcl__grid-mobile-label" }, React.createElement(Typography, { variant: "inherit" }, t(LABELS.FIELD), ":")), React.createElement(Typography, { variant: "inherit" }, item.field)), React.createElement("div", { className: "tcl__grid-old-value" }, React.createElement("span", { className: "tcl__grid-mobile-label" }, React.createElement(Typography, { variant: "inherit" }, t(LABELS.WAS), ":")), React.createElement(Typography, { variant: "inherit" }, item.previousValue
        ? JSON.stringify(item.previousValue)
        : `(${t(LABELS.EMPTY)})`)), React.createElement("div", { className: "tcl__grid-new-value" }, React.createElement("span", { className: "tcl__grid-mobile-label" }, React.createElement(Typography, { variant: "inherit" }, t(LABELS.NOW), ":")), React.createElement(Typography, { variant: "inherit" }, item.currentValue
        ? JSON.stringify(item.currentValue)
        : `(${t(LABELS.EMPTY)})`)))))));
};
const RawView = ({ oldData, newData }) => {
    return (React.createElement(React.Fragment, null, React.createElement("div", { className: "tcl__raw-view" }, React.createElement(ReactJsonView, { name: LABELS.PREVIOUS, src: oldData, displayDataTypes: false })), React.createElement(Divider, null), React.createElement("div", { className: "tcl__raw-view" }, React.createElement(ReactJsonView, { name: LABELS.CURRENT, src: newData, displayDataTypes: false }))));
};
export const TransactionChangeLog = ({ oldData, newData }) => {
    const [viewMode, setViewMode] = useState(VIEW_MODES.SUMMARY);
    const { t } = useTranslation();
    const handleTabChange = (event, newId) => {
        setViewMode(newId);
    };
    const tabList = useMemo(() => [
        {
            id: VIEW_MODES.SUMMARY,
            label: t(LABELS.SUMMARY)
        },
        {
            id: VIEW_MODES.RAW,
            label: t(LABELS.RAW_JSON)
        }
    ], [t]);
    oldData = oldData !== null && oldData !== void 0 ? oldData : {};
    const changes = useMemo(() => {
        const keys = new Set([...Object.keys(oldData), ...Object.keys(newData)]);
        const differences = [];
        KEYS_TO_IGNORE.forEach((key) => keys.delete(key));
        keys.forEach((key) => {
            var _a, _b;
            const oldValue = (_a = oldData[key]) !== null && _a !== void 0 ? _a : null;
            const newValue = (_b = newData[key]) !== null && _b !== void 0 ? _b : null;
            const isDifferent = JSON.stringify(oldValue) !== JSON.stringify(newValue);
            if (isDifferent) {
                differences.push({
                    field: key,
                    previousValue: oldValue,
                    currentValue: newValue
                });
            }
        });
        return differences;
    }, [oldData, newData]);
    return (React.createElement("div", { className: "tcl" }, React.createElement("div", { className: "tcl__header" }, React.createElement("div", { className: "tcl__title" }, React.createElement(Typography, { variant: "inherit" }, t(LABELS.CHANGE_LOG))), React.createElement(UdpTabs, { value: viewMode, onChange: handleTabChange, tabList: tabList })), viewMode === VIEW_MODES.SUMMARY && (React.createElement(SummaryView, { changes: changes, t: t })), viewMode === VIEW_MODES.RAW && (React.createElement(RawView, { oldData: oldData, newData: newData }))));
};
//# sourceMappingURL=TransactionChangeLog.js.map