"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ImageAttributesLineEditor = void 0;
var react_1 = __importStar(require("react"));
var CloudUpload_1 = __importDefault(require("@mui/icons-material/CloudUpload"));
var mdm_sdk_1 = require("@reltio/mdm-sdk");
var Image_1 = require("../Image");
var ImageActionsOverlay_1 = require("../ImageActionsOverlay");
var SmallIconButton_1 = require("../SmallIconButton");
var UploadImageDialog_1 = require("../UploadImageDialog");
var ImageAttributesLine_1 = require("../ImageAttributesLine");
var ConfigPermissionsContext_1 = require("../contexts/ConfigPermissionsContext");
var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
var styles_1 = require("./styles");
var defaultEntity = {};
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 ? ImageAttributesLine_1.DEFAULT_IMAGE_SIZE : _d;
    var styles = (0, styles_1.useStyles)(imageSize);
    var _e = (0, react_1.useState)(false), isVisibleUploadDialog = _e[0], setIsVisibleUploadDialog = _e[1];
    var setDefaultProfilePic = (0, MdmModuleContext_1.useMdmAction)('setDefaultProfilePicForModifiedEntity');
    var entity = (0, MdmModuleContext_1.useMdmEntity)() || defaultEntity;
    var defaultProfilePic = (0, MdmModuleContext_1.useMdmModifiedEntityDefaultProfilePic)(entity.uri);
    var canCreate = (0, react_1.useContext)(ConfigPermissionsContext_1.ConfigPermissionsContext).canCreate;
    var toggleVisibilityUploadDialog = (0, react_1.useCallback)(function () {
        setIsVisibleUploadDialog(function (visible) { return !visible; });
    }, []);
    var handleAddAttributes = (0, react_1.useCallback)(function (image) {
        var uri = (0, mdm_sdk_1.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: (0, mdm_sdk_1.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 = (0, react_1.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 = (0, mdm_sdk_1.getImageAttributeOvUrl)(attribute);
        var uri = attribute.uri;
        return (react_1.default.createElement(ImageActionsOverlay_1.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 = (0, mdm_sdk_1.getImageAttributeOvThumbnailUrl)(attribute);
            var uri = attribute.uri;
            var onOpenImageGalleryDialog = methods.onOpenImageGalleryDialog;
            return (react_1.default.createElement("div", { className: styles.image, key: uri },
                react_1.default.createElement(Image_1.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_1.default.createElement("div", { className: styles.root, "data-reltio-id": "image-line-edit-mode" },
        react_1.default.createElement(ImageAttributesLine_1.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_1.default.createElement("div", { className: styles.uploadContainer, onClick: toggleVisibilityUploadDialog },
            react_1.default.createElement(SmallIconButton_1.SmallIconButton, { className: styles.uploadButton, iconClassName: styles.uploadIcon, icon: CloudUpload_1.default, "data-reltio-id": "reltio-upload-image-button" })))),
        react_1.default.createElement(UploadImageDialog_1.UploadImageDialog, { open: isVisibleUploadDialog, onUpload: handleAddAttributes, onClose: toggleVisibilityUploadDialog })));
};
exports.ImageAttributesLineEditor = ImageAttributesLineEditor;
