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