import { IconButton, PopoverMenu, Tooltip } from '@wix/design-system';
import React from 'react';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { ArchiveSmall, EditSmall, MoreSmall } from '@wix/wix-ui-icons-common';
import { withoutDefaults } from '@wix/bex-core';
import { cairoCtaClicked } from '@wix/bex-core/bi';
import { observer } from 'mobx-react-lite';
import { CustomFieldsDisabledTooltip } from '../CustomFields';
function _ManageFieldsPopoverMenu({ state, id, origin, location, }) {
    const container = useWixPatternsContainer();
    const { translate: t } = container;
    if (!state.dataExtension.hasWritePermissions) {
        return (React.createElement(CustomFieldsDisabledTooltip, { disabled: !state.dataExtension.hasWritePermissions, content: t('cairo.customFields.writePermission.tooltip') },
            React.createElement(IconButton, { size: "tiny", dataHook: "custom-field-options-icon-button" },
                React.createElement(MoreSmall, null))));
    }
    const reportCtaClickedBi = ({ ctaIndex, ctaName, moreActionsIndex, }) => {
        state?.reportBi(withoutDefaults(cairoCtaClicked)({
            ctaIndex,
            ctaName,
            filteredListSize: state?.dataExtension.availableUserCustomFields.length,
            isSelectAll: false,
            location,
            moreActionsIndex,
            numCtas: 2,
            numItems: 1,
            url: typeof window !== 'undefined' ? window.location.href : '',
        }));
    };
    const onTriggerMenu = () => {
        reportCtaClickedBi({
            ctaIndex: 0,
            ctaName: 'More Actions Menu',
        });
    };
    return (React.createElement(PopoverMenu, { textSize: "small", placement: "bottom-end", dataHook: "custom-field-options", onShow: onTriggerMenu, triggerElement: React.createElement(Tooltip, { content: t('cairo.custom-columns.more-actions.tooltip') },
            React.createElement(IconButton, { size: "tiny", dataHook: "custom-field-options-icon-button", skin: "light" },
                React.createElement(MoreSmall, null))) },
        React.createElement(PopoverMenu.MenuItem, { dataHook: "custom-field-options-edit", prefixIcon: React.createElement(EditSmall, null), text: t('cairo.customFields.edit.CTA'), onClick: () => {
                reportCtaClickedBi({
                    ctaIndex: 1,
                    ctaName: 'Edit',
                    moreActionsIndex: 1,
                });
                state.openCustomFieldModal({
                    fieldId: id,
                    origin,
                });
            } }),
        React.createElement(PopoverMenu.MenuItem, { dataHook: "custom-field-options-archive", prefixIcon: React.createElement(ArchiveSmall, null), text: t('cairo.customFields.archive.CTA'), onClick: () => {
                reportCtaClickedBi({
                    ctaIndex: 2,
                    ctaName: 'Archive',
                    moreActionsIndex: 2,
                });
                state.archiveFieldModal.modal.open({ id, origin });
            } })));
}
export const ManageFieldsPopoverMenu = observer(_ManageFieldsPopoverMenu);
//# sourceMappingURL=ManageFieldsPopoverMenu.js.map