import { UdpDetailListItem } from "../../UI/dataDisplay/UdpDetailListItem.mjs";
import { UdpCard } from "../../UI/fluent-web-components/UdpCard.mjs";
import { UdpDivider } from "../../UI/fluent-web-components/UdpDivider.mjs";
import { UdpIcon } from "../../UI/fluent-web-components/UdpIcon.mjs";
import { UdpText } from "../../UI/fluent-web-components/UdpText.mjs";
import React, { useMemo, useState } from "react";
//#region src/udp/fileImportMapping/FileImportConfigCard.jsx
const FileImportConfigCard = (props) => {
	const { fileMappingRecord, domain } = props;
	const [showIndexNumbers, setShowIndexNumbers] = useState(false);
	const parsedProperties = useMemo(() => {
		if (fileMappingRecord) {
			let parsedObject = fileMappingRecord?.properties;
			if (typeof fileMappingRecord?.properties === "string") parsedObject = JSON.parse(fileMappingRecord?.properties);
			if ("includesHeader" in parsedObject && parsedObject?.includesHeader === false) setShowIndexNumbers(true);
			else setShowIndexNumbers(false);
			return Object.entries(parsedObject).map(([key, value]) => ({
				key,
				value
			}));
		}
	}, [fileMappingRecord]);
	const parsedFieldMappings = useMemo(() => {
		let parsedObject_0 = fileMappingRecord?.mapping;
		if (typeof fileMappingRecord?.mapping === "string") parsedObject_0 = JSON.parse(fileMappingRecord?.mapping);
		if (fileMappingRecord) return Object.entries(parsedObject_0);
	}, [fileMappingRecord]);
	return parsedFieldMappings && /* @__PURE__ */ React.createElement(UdpCard, {
		width: "100%",
		label: "Mapping Configuration",
		subtitle: domain
	}, parsedProperties?.map((property) => /* @__PURE__ */ React.createElement(UdpDetailListItem, {
		key: property?.key,
		label: property?.key.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, function(char) {
			return char.toUpperCase();
		}),
		value: property?.value === false ? "False" : property?.value === true ? "True" : property?.value
	})), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { style: {
		display: "flex",
		flexDirection: "row",
		justifyContent: "space-between",
		paddingTop: 20
	} }, /* @__PURE__ */ React.createElement(UdpText, { variant: "caption1Strong" }, showIndexNumbers ? "Column index's" : "File Headers"), /* @__PURE__ */ React.createElement(UdpText, { variant: "caption1Strong" }, "Fields")), /* @__PURE__ */ React.createElement(UdpDivider, { style: {
		marginTop: 5,
		marginBottom: -14
	} }), parsedFieldMappings?.map((field) => /* @__PURE__ */ React.createElement("div", {
		key: field[0],
		style: { height: 42 }
	}, /* @__PURE__ */ React.createElement("div", { style: {
		display: "flex",
		flexDirection: "row",
		gap: 10
	} }, /* @__PURE__ */ React.createElement(UdpText, { style: {
		marginTop: 25,
		width: "50%"
	} }, showIndexNumbers ? "index " + field[1]?.headerIndex : field[1]?.importFileField), /* @__PURE__ */ React.createElement(UdpIcon, {
		style: {
			marginTop: 28,
			width: "10%"
		},
		name: "arrow-right"
	}), /* @__PURE__ */ React.createElement(UdpText, { style: {
		marginTop: 25,
		width: "50%",
		textAlign: "right"
	} }, field[1]?.udpField.replace(/([A-Z])/g, " $1").trim())), /* @__PURE__ */ React.createElement(UdpDivider, { style: { margin: "5px 0px" } })))));
};
//#endregion
export { FileImportConfigCard };

//# sourceMappingURL=FileImportConfigCard.mjs.map