import React, { useMemo } from 'react';
import { makeStyles, Typography } from '@material-ui/core';
import { LayoutUnit } from '../layout/LayoutUnit';
const useStyles = makeStyles((theme) => ({
    root: {
        marginLeft: theme.spacing(2)
    },
    wrapper: {},
    columnOne: {
        height: 164,
        // maxWidth: 700,
        overflowX: 'auto',
        display: 'flex',
        flexDirection: 'column',
        flexWrap: 'wrap'
    },
    listItem: {
        marginRight: theme.spacing(1)
        // height: theme.spacing(14),
    }
}));
const ListItem = (props) => {
    const { label, value } = props;
    const classes = useStyles();
    return (React.createElement("div", { className: classes.listItem }, React.createElement(Typography, { color: "secondary", variant: "caption" }, label), React.createElement(Typography, null, value), React.createElement(LayoutUnit, { unit: "xxs" })));
};
export const NodeDetails = (props) => {
    const { node } = props;
    const classes = useStyles();
    const details = useMemo(() => {
        var _a;
        if (!node || !(node === null || node === void 0 ? void 0 : node.nodeObj) || !((_a = node === null || node === void 0 ? void 0 : node.properties) === null || _a === void 0 ? void 0 : _a.pageHeaderConfiguration)) {
            return [];
        }
        const shownPageHeaderConfigurations = node.properties.pageHeaderConfiguration.filter((phc) => phc.isShown);
        const list = [];
        shownPageHeaderConfigurations.forEach((sphc) => {
            var _a;
            const propertyName = sphc.propertyName;
            const property = sphc.property;
            let value = node.nodeObj[propertyName];
            if (sphc.joiningEntityKey) {
                if (sphc.joiningEntityKey === ((_a = node.properties) === null || _a === void 0 ? void 0 : _a.catalogObjectKey)) {
                    value = node.nodeObj[property ? property : propertyName];
                }
                else {
                    const valueObj = node.nodeObj[sphc.joiningEntityKey];
                    if (valueObj) {
                        value = valueObj[property ? property : propertyName];
                    }
                    if (!value) {
                        value = node.nodeObj[property ? property : propertyName];
                    }
                }
            }
            const item = {
                label: sphc.name,
                value: value ? value.toString() : 'N/A'
            };
            list.push(item);
        });
        return list;
    }, [node]);
    return (React.createElement("div", { className: classes.root }, React.createElement("div", { className: classes.wrapper }, React.createElement("div", { className: classes.columnOne }, details.map((item) => {
        return (React.createElement(ListItem, { key: item.label, label: item.label, value: item.value }));
    })))));
};
//# sourceMappingURL=NodeDetails.js.map