import React, { Fragment, useContext } from 'react';
import i18n from 'ui-i18n';
import classnames from 'classnames';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import Divider from '@mui/material/Divider';
import { MoreAttributesButton } from '../../../MoreAttributesButton';
import { ConfigPermissionsContext } from '../../../contexts/ConfigPermissionsContext';
import { getMoreAttrTypes } from '../../helpers';
import { useStyles } from './styles';
export var MetaInfoHeader = function (_a) {
    var _b;
    var attributeType = _a.attributeType, onAddAttributes = _a.onAddAttributes, uri = _a.uri;
    var styles = useStyles();
    var moreAttrTypes = getMoreAttrTypes(attributeType);
    var canCreate = useContext(ConfigPermissionsContext).canCreate;
    var canAdd = canCreate && Boolean(onAddAttributes);
    var handleApply = function (attrTypes) {
        if (onAddAttributes) {
            onAddAttributes(attrTypes.map(function (attributeType) { return ({ attributeType: attributeType, parentUri: uri }); }));
        }
    };
    return (React.createElement(Box, null,
        React.createElement(Typography, { className: classnames(styles.title, (_b = {}, _b[styles.canAdd] = canAdd, _b)) }, i18n.text('Meta info')),
        canAdd && (React.createElement(Fragment, null,
            React.createElement(MoreAttributesButton, { label: i18n.text('Attributes'), data: moreAttrTypes, dense: false, onApply: handleApply }),
            React.createElement(Divider, { className: styles.divider })))));
};
