import { IconButton, PopoverMenu, TextButton } from '@wix/design-system';
import React, { useImperativeHandle, useRef, forwardRef } from 'react';
import { observer } from 'mobx-react-lite';
import { ChevronDown, MoreSmall, Confirm, Duplicate, Edit, Delete, Flag, FlagDismiss, Pin, Revert, } from '@wix/wix-ui-icons-common';
import { useWixPatternsContainer } from '@wix/bex-core/react';
function _ManageViewPopover(props, ref) {
    const container = useWixPatternsContainer();
    const { state, redesign } = props;
    const { views, table, emitter, isViewChanged } = state;
    const buttonRef = useRef(null);
    useImperativeHandle(ref, () => ({
        focusTrigger: () => buttonRef.current?.focus(),
    }));
    const { translate: t } = container;
    const triggerElement = redesign ? (React.createElement(IconButton, { ref: buttonRef, tabIndex: 0, size: "tiny", dataHook: "manage-view-popover-button", onClick: (e) => {
            // Stop propagation so clicking the 3-dots button doesn't select
            // the dropdown option it sits inside of.
            e.stopPropagation();
            // Prevent default so the click doesn't trigger form submission
            // or other native behavior while inside DropdownLayout.
            e.preventDefault();
        } },
        React.createElement(MoreSmall, null))) : (React.createElement(TextButton, { size: "small", as: "button", dataHook: "manage-view-popover-button", suffixIcon: React.createElement(ChevronDown, null) }, t('cairo.manageView.CTA')));
    return (React.createElement(PopoverMenu, { minWidth: 271, ...(redesign && { placement: 'right', appendTo: 'window' }), onShow: () => {
            emitter.emit('openManageViewPopoverMenu');
        }, dataHook: "manage-view-popover", triggerElement: triggerElement },
        React.createElement(PopoverMenu.MenuItem, { text: t('cairo.manageView.saveChanges.CTA'), dataHook: "save-changes-to-view", disabled: !views.isCurrentViewSelected ||
                !isViewChanged ||
                views.currentView?.isPreset, prefixIcon: React.createElement(Confirm, null), onClick: () => {
                state.saveViewChanges();
            } }),
        !redesign && (React.createElement(PopoverMenu.MenuItem, { dataHook: "save-new-view", disabled: views.reachedViewsLimit, onClick: () => {
                views.saveViewModal.open();
                table.closeSidePanel();
            }, text: t('cairo.manageView.saveNewView.CTA'), prefixIcon: React.createElement(Duplicate, null) })),
        React.createElement(PopoverMenu.MenuItem, { dataHook: "rename-view", disabled: views.currentView?.isPreset || isViewChanged, onClick: () => {
                views.renameViewModal.open();
                table.closeSidePanel();
            }, text: t('cairo.manageView.Rename.CTA'), prefixIcon: React.createElement(Edit, null) }),
        React.createElement(PopoverMenu.MenuItem, { dataHook: "set-as-default-view", disabled: !views.currentView || (isViewChanged && !views.isDefaultView), onClick: () => {
                state.setAsDefaultView();
            }, text: views.isDefaultView
                ? t('cairo.manageView.setAsDefault.reset.CTA')
                : t('cairo.manageView.setAsDefault.CTA'), prefixIcon: views.isDefaultView ? (redesign ? (React.createElement(Revert, null)) : (React.createElement(FlagDismiss, null))) : redesign ? (React.createElement(Pin, null)) : (React.createElement(Flag, null)) }),
        React.createElement(PopoverMenu.MenuItem, { dataHook: "delete-view", disabled: !views.isCurrentViewSelected || views.currentView?.isPreset, onClick: () => {
                state.deleteView();
            }, text: t('cairo.manageView.Delete.CTA'), prefixIcon: React.createElement(Delete, null) })));
}
export const ManageViewPopover = observer(forwardRef(_ManageViewPopover));
//# sourceMappingURL=ManageViewPopover.js.map