import React, { useMemo } from 'react';
import Box from '@mui/material/Box';
import { ReadOnlyAttributesPager } from '../../../ReadOnlyAttributesPager';
import { MetaInfoItem } from '../MetaInfoItem';
import { getNotSystemAttributesList, getSystemAttributesList } from '../../helpers';
import { useMdmIsViewMode } from '../../../contexts/MdmModuleContext';
import { useStyles } from './styles';
export var MetaInfoList = function (_a) {
    var attributeValue = _a.attributeValue, attributeType = _a.attributeType, imageAttributeFieldsOrder = _a.imageAttributeFieldsOrder;
    var styles = useStyles();
    var isViewMode = useMdmIsViewMode();
    var systemAttributesList = getSystemAttributesList(attributeValue, imageAttributeFieldsOrder);
    var notSystemAttributesList = getNotSystemAttributesList(attributeValue, attributeType, imageAttributeFieldsOrder);
    var attributesClasses = useMemo(function () { return ({
        title: styles.title,
        content: styles.content
    }); }, [styles]);
    return (React.createElement(Box, { "data-reltio-id": "image-meta-info-list", className: styles.root },
        systemAttributesList.map(function (_a) {
            var title = _a.title, value = _a.value, isLink = _a.isLink;
            return (React.createElement(MetaInfoItem, { key: title, isLink: isLink, title: title, content: value }));
        }),
        isViewMode &&
            notSystemAttributesList.map(function (_a) {
                var attrType = _a.attrType, values = _a.values;
                return (React.createElement(ReadOnlyAttributesPager, { key: attrType.uri, attributeType: attrType, drawLines: false, values: values, classes: attributesClasses, parentUri: attributeValue.uri }));
            })));
};
