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 { CustomFieldOrigin, withoutDefaults } from '@wix/bex-core';
import { cairoCtaClicked } from '@wix/bex-core/bi';
import { observer } from 'mobx-react-lite';
import { CustomFieldsDisabledTooltip } from '../CustomFields';
import { CustomFieldsPanelState } from '../../state/CustomFields/CustomFieldsPanelState';

export interface ManageFieldsPopoverMenuProps {
  state: CustomFieldsPanelState;
  id: string;
  origin: CustomFieldOrigin;
  location: string;
}

function _ManageFieldsPopoverMenu({
  state,
  id,
  origin,
  location,
}: ManageFieldsPopoverMenuProps) {
  const container = useWixPatternsContainer();
  const { translate: t } = container;

  if (!state.dataExtension.hasWritePermissions) {
    return (
      <CustomFieldsDisabledTooltip
        disabled={!state.dataExtension.hasWritePermissions}
        content={t('cairo.customFields.writePermission.tooltip')}
      >
        <IconButton size="tiny" dataHook="custom-field-options-icon-button">
          <MoreSmall />
        </IconButton>
      </CustomFieldsDisabledTooltip>
    );
  }

  const reportCtaClickedBi = ({
    ctaIndex,
    ctaName,
    moreActionsIndex,
  }: {
    ctaIndex: number;
    ctaName: string;
    moreActionsIndex?: number;
  }) => {
    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 (
    <PopoverMenu
      textSize="small"
      placement="bottom-end"
      dataHook="custom-field-options"
      onShow={onTriggerMenu}
      triggerElement={
        <Tooltip content={t('cairo.custom-columns.more-actions.tooltip')}>
          <IconButton
            size="tiny"
            dataHook="custom-field-options-icon-button"
            skin="light"
          >
            <MoreSmall />
          </IconButton>
        </Tooltip>
      }
    >
      <PopoverMenu.MenuItem
        dataHook="custom-field-options-edit"
        prefixIcon={<EditSmall />}
        text={t('cairo.customFields.edit.CTA')}
        onClick={() => {
          reportCtaClickedBi({
            ctaIndex: 1,
            ctaName: 'Edit',
            moreActionsIndex: 1,
          });
          state.openCustomFieldModal({
            fieldId: id,
            origin,
          });
        }}
      />

      <PopoverMenu.MenuItem
        dataHook="custom-field-options-archive"
        prefixIcon={<ArchiveSmall />}
        text={t('cairo.customFields.archive.CTA')}
        onClick={() => {
          reportCtaClickedBi({
            ctaIndex: 2,
            ctaName: 'Archive',
            moreActionsIndex: 2,
          });
          state.archiveFieldModal.modal.open({ id, origin });
        }}
      />
    </PopoverMenu>
  );
}

export const ManageFieldsPopoverMenu = observer(_ManageFieldsPopoverMenu);
