import React, { useCallback, useRef } from 'react';
import { Box, Button } from '@wix/design-system';
import { TagSmall } from '@wix/wix-ui-icons-common';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { useWixPatternsContainer } from '../..';
import { BulkAssignTagsPopover } from '../Tags/BulkAssignTagsPopover';
import { DisabledTooltip } from '../DisabledTooltip';
import { observer } from 'mobx-react-lite';
const _TagsAssignButton = () => {
    const toolbarCollectionState = useToolbarCollectionContext();
    const { translate: t } = useWixPatternsContainer();
    const buttonRef = useRef(null);
    const { tagsBulkAssignPopoverState } = toolbarCollectionState.tagsCollectionState ?? {};
    const setButtonRef = useCallback((element) => {
        if (!element || !tagsBulkAssignPopoverState) {
            return;
        }
        const el = element.querySelector('button');
        if (!el) {
            return;
        }
        buttonRef.current = el;
        tagsBulkAssignPopoverState.triggerButtonRef = buttonRef;
    }, [tagsBulkAssignPopoverState]);
    if (!tagsBulkAssignPopoverState) {
        return null;
    }
    const { tagsBulkAssignButtonState } = tagsBulkAssignPopoverState;
    return (React.createElement(BulkAssignTagsPopover, { state: tagsBulkAssignPopoverState, popoverElement: React.createElement(Box, null,
            React.createElement("div", { ref: setButtonRef, style: { display: 'contents' } },
                React.createElement(DisabledTooltip, { content: tagsBulkAssignButtonState.tooltipContent, disabled: !tagsBulkAssignButtonState.isDisabled, dataHook: "tags-assign-button-disabled-tooltip" },
                    React.createElement(Button, { skin: "standard", priority: "secondary", size: "small", ellipsis: true, prefixIcon: React.createElement(TagSmall, null), dataHook: "tags-assign-button", onClick: () => {
                            tagsBulkAssignPopoverState.showPopover();
                        }, disabled: tagsBulkAssignButtonState.isDisabled }, t('cairo.tags.collectionPage.add.CTA'))))) }));
};
export const TagsAssignButton = observer(_TagsAssignButton);
//# sourceMappingURL=TagsAssignButton.js.map