import React from 'react';
import { Box, IconButton, Tooltip } from '@wix/design-system';
import { More } from '@wix/wix-ui-icons-common';
import { observer } from 'mobx-react-lite';
import { MoreActionsBase } from './MoreActionsBase';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { MoreActionsProps } from './MoreActionsProps';
import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';

export interface MoreActionsIconProps extends MoreActionsProps {}

function _MoreActionsIcon(params: MoreActionsIconProps) {
  const { translate: t } = useWixPatternsContainer();
  const isBmHarmonyTheme = useBmHarmonyTheme();

  return (
    <Box
    // Box is needed to wrap the MoreActionsBase component to avoid extra gap between elements
    >
      <Tooltip content={t('cairo.moreActions')} dataHook="more-actions-tooltip">
        <MoreActionsBase
          {...params}
          triggerElement={
            <IconButton
              dataHook="more-actions-popover-button"
              priority={isBmHarmonyTheme ? 'tertiary' : 'secondary'}
            >
              <More />
            </IconButton>
          }
        />
      </Tooltip>
    </Box>
  );
}

export const MoreActionsIcon = observer(_MoreActionsIcon);
export const MoreActions = MoreActionsIcon;