import React, { memo, useMemo, useState } from 'react';
import i18n from 'ui-i18n';
import classnames from 'classnames';
import { ifElse, equals, prop, identity } from 'ramda';
import Button from '@mui/material/Button';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import DownloadIcon from '../icons/Download';
import { useAttributeValueConfigPermissions } from '../contexts/ConfigPermissionsContext';
import { SmallIconButton } from '../SmallIconButton';
import { DropDownMenuButton } from '../DropDownMenuButton';
import { CheckedIcon } from './components/CheckedIcon';
import { useStyles } from './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 ? identity : _e, _f = props.onSelect, onSelect = _f === void 0 ? identity : _f, onShareLink = props.onShareLink, onSetAsDefault = props.onSetAsDefault, onDelete = props.onDelete, _g = props.onDownload, onDownload = _g === void 0 ? identity : _g, onClick = props.onClick;
    var styles = useStyles();
    var _h = useState(false), hovered = _h[0], setHovered = _h[1];
    var canDelete = useAttributeValueConfigPermissions(id).canDelete;
    var menuItems = useMemo(function () {
        return [
            {
                text: i18n.text('Share link'),
                onClick: onShareLink
            },
            {
                text: i18n.text('Set as default'),
                onClick: onSetAsDefault
            },
            {
                text: i18n.text('Delete'),
                onClick: canDelete && onDelete
            }
        ].filter(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 ifElse(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.createElement("div", { className: classnames(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.createElement(CheckedIcon, { className: styles.checkedIcon, checked: selected, onClick: toggleSelected(selected) })),
        showActions && (React.createElement("div", { className: styles.actions },
            React.createElement(SmallIconButton, { "data-reltio-id": "download-button", onClick: onDownload, className: styles.actionButton, icon: DownloadIcon }),
            React.createElement(DropDownMenuButton, { menuId: "image-overlay-actions-".concat(id), buttonComponent: SmallIconButton, buttonProps: {
                    'data-reltio-id': 'image-overlay-actions',
                    icon: MoreVertIcon,
                    className: classnames(styles.actionButton, styles.dropDownMenuButton)
                }, menuItems: menuItems }))),
        showDeselectButton && (React.createElement(Button, { className: styles.button, variant: "outlined", onClick: onDeselect }, i18n.text('Deselect')))));
};
export default memo(ImageActionsOverlay);
