"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 });
var react_1 = __importStar(require("react"));
var ui_i18n_1 = __importDefault(require("ui-i18n"));
var classnames_1 = __importDefault(require("classnames"));
var ramda_1 = require("ramda");
var Button_1 = __importDefault(require("@mui/material/Button"));
var MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
var Download_1 = __importDefault(require("../icons/Download"));
var ConfigPermissionsContext_1 = require("../contexts/ConfigPermissionsContext");
var SmallIconButton_1 = require("../SmallIconButton");
var DropDownMenuButton_1 = require("../DropDownMenuButton");
var CheckedIcon_1 = require("./components/CheckedIcon");
var styles_1 = require("./styles");
var ImageActionsOverlay = function (props) {
    var _a;
    var id = props.id, _b = props.canBeSelected, canBeSelected = _b === void 0 ? false : _b, _c = props.selected, selected = _c === void 0 ? false : _c, _d = props.selectionMode, selectionMode = _d === void 0 ? false : _d, _e = props.onDeselect, onDeselect = _e === void 0 ? ramda_1.identity : _e, _f = props.onSelect, onSelect = _f === void 0 ? ramda_1.identity : _f, onShareLink = props.onShareLink, onSetAsDefault = props.onSetAsDefault, onDelete = props.onDelete, _g = props.onDownload, onDownload = _g === void 0 ? ramda_1.identity : _g, onClick = props.onClick;
    var styles = (0, styles_1.useStyles)();
    var _h = (0, react_1.useState)(false), hovered = _h[0], setHovered = _h[1];
    var canDelete = (0, ConfigPermissionsContext_1.useAttributeValueConfigPermissions)(id).canDelete;
    var menuItems = (0, react_1.useMemo)(function () {
        return [
            {
                text: ui_i18n_1.default.text('Share link'),
                onClick: onShareLink
            },
            {
                text: ui_i18n_1.default.text('Set as default'),
                onClick: onSetAsDefault
            },
            {
                text: ui_i18n_1.default.text('Delete'),
                onClick: canDelete && onDelete
            }
        ].filter((0, ramda_1.prop)('onClick'));
    }, [onShareLink, onSetAsDefault, onDelete, canDelete]);
    var handleMouseEnter = function () { return setHovered(true); };
    var handleMouseLeave = function () { return setHovered(false); };
    var toggleSelected = function (selected) { return function () { return (0, ramda_1.ifElse)((0, ramda_1.equals)(true), onDeselect, onSelect)(selected); }; };
    var showCheckBox = canBeSelected && (selected || hovered || selectionMode);
    var showActions = !selectionMode && !selected && hovered;
    var showDeselectButton = canBeSelected && selected;
    var handleClick = function (event) {
        if (event.currentTarget === event.target)
            onClick();
    };
    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.overlay, (_a = {},
            _a[styles.selected] = selected,
            _a[styles.selectionMode] = selectionMode,
            _a)), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: selectionMode ? toggleSelected(selected) : handleClick, "data-reltio-id": "image-actions-overlay" },
        showCheckBox && (react_1.default.createElement(CheckedIcon_1.CheckedIcon, { className: styles.checkedIcon, checked: selected, onClick: toggleSelected(selected) })),
        showActions && (react_1.default.createElement("div", { className: styles.actions },
            react_1.default.createElement(SmallIconButton_1.SmallIconButton, { "data-reltio-id": "download-button", onClick: onDownload, className: styles.actionButton, icon: Download_1.default }),
            react_1.default.createElement(DropDownMenuButton_1.DropDownMenuButton, { menuId: "image-overlay-actions-".concat(id), buttonComponent: SmallIconButton_1.SmallIconButton, buttonProps: {
                    'data-reltio-id': 'image-overlay-actions',
                    icon: MoreVert_1.default,
                    className: (0, classnames_1.default)(styles.actionButton, styles.dropDownMenuButton)
                }, menuItems: menuItems }))),
        showDeselectButton && (react_1.default.createElement(Button_1.default, { className: styles.button, variant: "outlined", onClick: onDeselect }, ui_i18n_1.default.text('Deselect')))));
};
exports.default = (0, react_1.memo)(ImageActionsOverlay);
