import React from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import Box from '@mui/material/Box';
import { MetaInfoHeader } from '../MetaInfoHeader';
import { MetaInfoList } from '../MetaInfoList';
import { MetaInfoForm } from '../MetaInfoForm';
import { darkTheme } from '../../../constants/theme';
import { useEditMetaInfo } from './useEditMetaInfo';
import { useMdmIsEditableMode, useMdmMode } from '../../../contexts/MdmModuleContext';
var darkMuiTheme = createTheme(darkTheme);
export var MetaInfo = function (_a) {
    var imageAttributeFieldsOrder = _a.imageAttributeFieldsOrder, attributeType = _a.attributeType, initialAttributeValue = _a.attributeValue;
    var mode = useMdmMode();
    var isEditableMode = useMdmIsEditableMode();
    var _b = useEditMetaInfo({ attributeType: attributeType, initialAttributeValue: initialAttributeValue }), addAttributes = _b.addAttributes, changeAttribute = _b.changeAttribute, deleteAttribute = _b.deleteAttribute, clearLocalChanges = _b.clearLocalChanges, applyLocalChanges = _b.applyLocalChanges, attributeValue = _b.attributeValue, hasChanges = _b.hasChanges;
    return (React.createElement(ThemeProvider, { theme: darkMuiTheme },
        React.createElement(Box, { "data-mui-color-scheme": "dark" },
            React.createElement(MetaInfoHeader, { attributeType: attributeType, uri: attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.uri, onAddAttributes: isEditableMode ? addAttributes : undefined }),
            React.createElement(MetaInfoList, { attributeType: attributeType, attributeValue: attributeValue, imageAttributeFieldsOrder: imageAttributeFieldsOrder }),
            isEditableMode && (React.createElement(MetaInfoForm, { mode: mode, imageAttributeFieldsOrder: imageAttributeFieldsOrder, attributeType: attributeType, attributeValue: attributeValue, hasChanges: hasChanges, onDeleteAttribute: deleteAttribute, onChangeAttribute: changeAttribute, onAddAttributes: addAttributes, onCancel: clearLocalChanges, onApply: applyLocalChanges })))));
};
