import { Typography } from "../../../../../UI/dataDisplay/typography/Typography.mjs";
import { Divider } from "../../../../../UI/utilityDisplay/Divider.mjs";
import { UdpTabs } from "../../../../../UI/navigation/tabs/UdpTabs.mjs";
import { c } from "react-compiler-runtime";
import React, { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import ReactJsonView from "@microlink/react-json-view";
import "./TransactionChangeLog.css";
//#region src/udp/pages/UdpTransactionsPage/components/transactionHistory/TransactionChangeLog.jsx
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 = (t0) => {
	const $ = c(24);
	const { changes, t } = t0;
	let t1;
	if ($[0] !== t) {
		t1 = t(LABELS.FIELD);
		$[0] = t;
		$[1] = t1;
	} else t1 = $[1];
	let t2;
	if ($[2] !== t1) {
		t2 = /* @__PURE__ */ React.createElement(Typography, { variant: "inherit" }, t1);
		$[2] = t1;
		$[3] = t2;
	} else t2 = $[3];
	let t3;
	if ($[4] !== t) {
		t3 = t(LABELS.PREVIOUS);
		$[4] = t;
		$[5] = t3;
	} else t3 = $[5];
	let t4;
	if ($[6] !== t3) {
		t4 = /* @__PURE__ */ React.createElement(Typography, { variant: "inherit" }, t3);
		$[6] = t3;
		$[7] = t4;
	} else t4 = $[7];
	let t5;
	if ($[8] !== t) {
		t5 = t(LABELS.CURRENT);
		$[8] = t;
		$[9] = t5;
	} else t5 = $[9];
	let t6;
	if ($[10] !== t5) {
		t6 = /* @__PURE__ */ React.createElement(Typography, { variant: "inherit" }, t5);
		$[10] = t5;
		$[11] = t6;
	} else t6 = $[11];
	let t7;
	if ($[12] !== t2 || $[13] !== t4 || $[14] !== t6) {
		t7 = /* @__PURE__ */ React.createElement("div", { className: "tcl__grid-primary-headers" }, t2, t4, t6);
		$[12] = t2;
		$[13] = t4;
		$[14] = t6;
		$[15] = t7;
	} else t7 = $[15];
	let t8;
	if ($[16] !== changes || $[17] !== t) {
		let t9;
		if ($[19] !== t) {
			t9 = (item) => /* @__PURE__ */ React.createElement("div", {
				key: item.field,
				className: "tcl__row"
			}, /* @__PURE__ */ React.createElement("div", { className: "tcl__grid-field" }, /* @__PURE__ */ React.createElement("span", { className: "tcl__grid-mobile-label" }, /* @__PURE__ */ React.createElement(Typography, { variant: "inherit" }, t(LABELS.FIELD), ":")), /* @__PURE__ */ React.createElement(Typography, { variant: "inherit" }, item.field)), /* @__PURE__ */ React.createElement("div", { className: "tcl__grid-old-value" }, /* @__PURE__ */ React.createElement("span", { className: "tcl__grid-mobile-label" }, /* @__PURE__ */ React.createElement(Typography, { variant: "inherit" }, t(LABELS.WAS), ":")), /* @__PURE__ */ React.createElement(Typography, { variant: "inherit" }, item.previousValue ? JSON.stringify(item.previousValue) : `(${t(LABELS.EMPTY)})`)), /* @__PURE__ */ React.createElement("div", { className: "tcl__grid-new-value" }, /* @__PURE__ */ React.createElement("span", { className: "tcl__grid-mobile-label" }, /* @__PURE__ */ React.createElement(Typography, { variant: "inherit" }, t(LABELS.NOW), ":")), /* @__PURE__ */ React.createElement(Typography, { variant: "inherit" }, item.currentValue ? JSON.stringify(item.currentValue) : `(${t(LABELS.EMPTY)})`)));
			$[19] = t;
			$[20] = t9;
		} else t9 = $[20];
		t8 = changes.map(t9);
		$[16] = changes;
		$[17] = t;
		$[18] = t8;
	} else t8 = $[18];
	let t9;
	if ($[21] !== t7 || $[22] !== t8) {
		t9 = /* @__PURE__ */ React.createElement(React.Fragment, null, t7, t8);
		$[21] = t7;
		$[22] = t8;
		$[23] = t9;
	} else t9 = $[23];
	return t9;
};
const RawView = (t0) => {
	const $ = c(8);
	const { oldData, newData } = t0;
	let t1;
	if ($[0] !== oldData) {
		t1 = /* @__PURE__ */ React.createElement("div", { className: "tcl__raw-view" }, /* @__PURE__ */ React.createElement(ReactJsonView, {
			name: LABELS.PREVIOUS,
			src: oldData,
			displayDataTypes: false
		}));
		$[0] = oldData;
		$[1] = t1;
	} else t1 = $[1];
	let t2;
	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
		t2 = /* @__PURE__ */ React.createElement(Divider, null);
		$[2] = t2;
	} else t2 = $[2];
	let t3;
	if ($[3] !== newData) {
		t3 = /* @__PURE__ */ React.createElement("div", { className: "tcl__raw-view" }, /* @__PURE__ */ React.createElement(ReactJsonView, {
			name: LABELS.CURRENT,
			src: newData,
			displayDataTypes: false
		}));
		$[3] = newData;
		$[4] = t3;
	} else t3 = $[4];
	let t4;
	if ($[5] !== t1 || $[6] !== t3) {
		t4 = /* @__PURE__ */ React.createElement(React.Fragment, null, t1, t2, t3);
		$[5] = t1;
		$[6] = t3;
		$[7] = t4;
	} else t4 = $[7];
	return t4;
};
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 ?? {};
	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_0) => {
			const oldValue = oldData[key_0] ?? null;
			const newValue = newData[key_0] ?? null;
			if (JSON.stringify(oldValue) !== JSON.stringify(newValue)) differences.push({
				field: key_0,
				previousValue: oldValue,
				currentValue: newValue
			});
		});
		return differences;
	}, [oldData, newData]);
	return /* @__PURE__ */ React.createElement("div", { className: "tcl" }, /* @__PURE__ */ React.createElement("div", { className: "tcl__header" }, /* @__PURE__ */ React.createElement("div", { className: "tcl__title" }, /* @__PURE__ */ React.createElement(Typography, { variant: "inherit" }, t(LABELS.CHANGE_LOG))), /* @__PURE__ */ React.createElement(UdpTabs, {
		value: viewMode,
		onChange: handleTabChange,
		tabList
	})), viewMode === VIEW_MODES.SUMMARY && /* @__PURE__ */ React.createElement(SummaryView, {
		changes,
		t
	}), viewMode === VIEW_MODES.RAW && /* @__PURE__ */ React.createElement(RawView, {
		oldData,
		newData
	}));
};
//#endregion
export { TransactionChangeLog };

//# sourceMappingURL=TransactionChangeLog.mjs.map