import React, { useCallback, useContext, useState } from 'react';
import CloudUploadIcon from '@mui/icons-material/CloudUpload';
import { generateUri, getImageAttributeOvThumbnailUrl, getImageAttributeOvUrl } from '@reltio/mdm-sdk';
import { Image } from '../Image';
import { ImageActionsOverlay } from '../ImageActionsOverlay';
import { SmallIconButton } from '../SmallIconButton';
import { UploadImageDialog } from '../UploadImageDialog';
import { ImageAttributesLine, DEFAULT_IMAGE_SIZE } from '../ImageAttributesLine';
import { ConfigPermissionsContext } from '../contexts/ConfigPermissionsContext';
import { useMdmAction, useMdmEntity, useMdmModifiedEntityDefaultProfilePic } from '../contexts/MdmModuleContext';
import { useStyles } from './styles';
var defaultEntity = {};
export var ImageAttributesLineEditor = function (_a) {
    var _b = _a.attributeType, attributeType = _b === void 0 ? {} : _b, _c = _a.attributeValues, attributeValues = _c === void 0 ? [] : _c, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, requestNextPageOfAttributeValues = _a.requestNextPageOfAttributeValues, parentUri = _a.parentUri, paging = _a.paging, showNonOv = _a.showNonOv, _d = _a.imageSize, imageSize = _d === void 0 ? DEFAULT_IMAGE_SIZE : _d;
    var styles = useStyles(imageSize);
    var _e = useState(false), isVisibleUploadDialog = _e[0], setIsVisibleUploadDialog = _e[1];
    var setDefaultProfilePic = useMdmAction('setDefaultProfilePicForModifiedEntity');
    var entity = useMdmEntity() || defaultEntity;
    var defaultProfilePic = useMdmModifiedEntityDefaultProfilePic(entity.uri);
    var canCreate = useContext(ConfigPermissionsContext).canCreate;
    var toggleVisibilityUploadDialog = useCallback(function () {
        setIsVisibleUploadDialog(function (visible) { return !visible; });
    }, []);
    var handleAddAttributes = useCallback(function (image) {
        var uri = generateUri(parentUri, attributeType.name);
        var attributeValue = {};
        var _loop_1 = function (key) {
            var attribute = (attributeType.attributes || []).find(function (_a) {
                var name = _a.name;
                return name === key;
            });
            if (attribute) {
                attributeValue[key] = [
                    {
                        uri: generateUri(uri, attribute.name),
                        ov: true,
                        value: image[key],
                        type: attribute.uri
                    }
                ];
            }
        };
        for (var key in image) {
            _loop_1(key);
        }
        onChangeAttribute({ attributeType: attributeType, uri: uri, value: attributeValue });
    }, [onChangeAttribute, parentUri, attributeType]);
    var handleDeleteAttribute = useCallback(function (param) {
        var _a;
        onDeleteAttribute(param);
        if (defaultProfilePic === param.uri) {
            var newDefaultPic = ((_a = attributeValues[0]) === null || _a === void 0 ? void 0 : _a.uri) === param.uri ? attributeValues[1] : attributeValues[0];
            setDefaultProfilePic({
                entityUri: entity.uri,
                value: newDefaultPic || {}
            });
        }
    }, [onDeleteAttribute, entity, defaultProfilePic, attributeValues, setDefaultProfilePic]);
    var renderImageActionsOverlay = function (methods, attribute) {
        var onOpenImageGalleryDialog = methods.onOpenImageGalleryDialog, onDownload = methods.onDownload, onShareLink = methods.onShareLink, onSetAsDefault = methods.onSetAsDefault;
        var imageUrl = getImageAttributeOvUrl(attribute);
        var uri = attribute.uri;
        return (React.createElement(ImageActionsOverlay, { id: uri, onShareLink: function () { return onShareLink(imageUrl); }, onSetAsDefault: function () { return onSetAsDefault(attribute); }, onDelete: function () { return handleDeleteAttribute({ uri: uri, attributeType: attributeType }); }, onDownload: function () { return onDownload([imageUrl]); }, onClick: function () { return onOpenImageGalleryDialog(uri); } }));
    };
    var renderImage = function (methods) {
        var renderImage = function (attribute) {
            if (attribute === void 0) { attribute = {}; }
            var src = getImageAttributeOvThumbnailUrl(attribute);
            var uri = attribute.uri;
            var onOpenImageGalleryDialog = methods.onOpenImageGalleryDialog;
            return (React.createElement("div", { className: styles.image, key: uri },
                React.createElement(Image, { src: src, overlay: renderImageActionsOverlay(methods, attribute), onClick: function () { return onOpenImageGalleryDialog(uri); }, size: { imageWidth: imageSize.imageWidth, imageHeight: imageSize.imageHeight }, "data-reltio-id": "reltio-attribute-value" })));
        };
        return renderImage;
    };
    return (React.createElement("div", { className: styles.root, "data-reltio-id": "image-line-edit-mode" },
        React.createElement(ImageAttributesLine, { attributeValues: attributeValues, attributeType: attributeType, renderImage: renderImage, overlay: true, countFixedItems: canCreate ? 1 : 0, onUpload: toggleVisibilityUploadDialog, onDeleteAttribute: handleDeleteAttribute, imageSize: imageSize, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, paging: paging, parentUri: parentUri, showNonOv: showNonOv }, canCreate && (React.createElement("div", { className: styles.uploadContainer, onClick: toggleVisibilityUploadDialog },
            React.createElement(SmallIconButton, { className: styles.uploadButton, iconClassName: styles.uploadIcon, icon: CloudUploadIcon, "data-reltio-id": "reltio-upload-image-button" })))),
        React.createElement(UploadImageDialog, { open: isVisibleUploadDialog, onUpload: handleAddAttributes, onClose: toggleVisibilityUploadDialog })));
};
