import React, { memo, useCallback } from 'react';
import i18n from 'ui-i18n';
import CloseIcon from '@mui/icons-material/Close';
import AddCircleIcon from '@mui/icons-material/AddCircle';
import { SmallIconButtonWithTooltip } from '../../../SmallIconButton/index';
import DuplicateIcon from '../../../icons/Duplicate';
import { useStyles } from './styles';
var RowActions = function (_a) {
    var rowData = _a.rowData, rowContext = _a.rowContext;
    var styles = useStyles();
    var _b = rowData || {}, index = _b.id, attribute = _b.attribute;
    var addRowAfterIndex = rowContext.addRowAfterIndex, removeRow = rowContext.removeRow, duplicateRow = rowContext.duplicateRow;
    var onAddRowAfterId = useCallback(function () {
        addRowAfterIndex(index);
    }, [addRowAfterIndex, index]);
    var onRowDuplicate = useCallback(function () {
        duplicateRow(index);
    }, [duplicateRow, index]);
    var onRowDelete = useCallback(function () {
        removeRow(index);
    }, [index, removeRow]);
    return (React.createElement("div", { className: styles.actions },
        React.createElement(SmallIconButtonWithTooltip, { "data-reltio-id": "query-builder-row-actions-add", tooltipTitle: i18n.text('Add'), icon: AddCircleIcon, size: "M", onClick: onAddRowAfterId }),
        attribute && (React.createElement(SmallIconButtonWithTooltip, { "data-reltio-id": "query-builder-row-actions-duplicate", tooltipTitle: i18n.text('Duplicate'), icon: DuplicateIcon, size: "M", onClick: onRowDuplicate })),
        React.createElement(SmallIconButtonWithTooltip, { "data-reltio-id": "query-builder-row-actions-delete", tooltipTitle: i18n.text('Delete'), icon: CloseIcon, size: "M", onClick: onRowDelete })));
};
export default memo(RowActions);
