import React, { useCallback, useEffect, useState } from 'react';
import i18n from 'ui-i18n';
import classnames from 'classnames';
import Box from '@mui/material/Box';
import Checkbox from '@mui/material/Checkbox';
import Typography from '@mui/material/Typography';
import FormControlLabel from '@mui/material/FormControlLabel';
import { MetaInfo } from '../MetaInfo';
import { useMdmEntity, useMdmImageAttributesFieldsOrder, useMdmIsViewMode, useMdmModifiedEntity } from '../../../contexts/MdmModuleContext';
import { useStyles } from './styles';
export var ImageDetailsViewSidebar = function (_a) {
    var className = _a.className, attributeValue = _a.attributeValue, handleSetAsDefault = _a.handleSetAsDefault, attributeType = _a.attributeType;
    var styles = useStyles();
    var _b = useState(false), isDefault = _b[0], setIsDefault = _b[1];
    var entity = useMdmEntity() || {};
    var modifiedEntity = useMdmModifiedEntity(entity === null || entity === void 0 ? void 0 : entity.uri) || {};
    var isViewMode = useMdmIsViewMode();
    var imageAttributeConfig = useMdmImageAttributesFieldsOrder() || {};
    var entityToShow = isViewMode ? entity : modifiedEntity;
    var imageAttributeFieldsOrder = imageAttributeConfig[entity === null || entity === void 0 ? void 0 : entity.type] || (imageAttributeConfig === null || imageAttributeConfig === void 0 ? void 0 : imageAttributeConfig.default) || {};
    useEffect(function () {
        setIsDefault((entityToShow === null || entityToShow === void 0 ? void 0 : entityToShow.defaultProfilePic) === (attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.uri));
    }, [attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.uri, entityToShow]);
    var handleChange = useCallback(function () {
        handleSetAsDefault(attributeValue.uri);
    }, [attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.uri]);
    return (React.createElement(Box, { className: classnames(styles.root, className) },
        React.createElement(Box, { className: styles.header },
            React.createElement(Typography, { className: styles.headerTitle }, i18n.text('Details'))),
        React.createElement(Box, { className: styles.bodyWrapper },
            React.createElement(Box, { className: styles.body },
                React.createElement(FormControlLabel, { classes: { root: styles.formControlLabel, label: styles.checkboxLabel }, control: React.createElement(Checkbox, { className: styles.checkbox, checked: isDefault, onChange: handleChange }), label: i18n.text('Set as default') }),
                React.createElement(MetaInfo, { attributeType: attributeType, imageAttributeFieldsOrder: imageAttributeFieldsOrder, attributeValue: attributeValue })))));
};
