import React, { ReactElement } from 'react';
import { Box, IconButton, IconButtonProps } from '@wix/design-system';
import { More } from '@wix/wix-ui-icons-common';
import { DisabledTooltip } from '../DisabledTooltip';

export interface DisabledActionCellMenuProps {
  dataHook?: string;
  tooltipContent?: React.ReactNode;
  size?: IconButtonProps['size'];
  skin?: IconButtonProps['skin'];
  icon?: ReactElement;
  ariaLabel?: string;
}

export function DisabledActionCellMenu({
  dataHook,
  tooltipContent,
  size = 'medium',
  skin = 'standard',
  icon = <More />,
  ariaLabel,
}: DisabledActionCellMenuProps) {
  const buttonAriaLabel =
    typeof tooltipContent === 'string'
      ? tooltipContent
      : ariaLabel;

  const button = (
    <IconButton
      dataHook={dataHook}
      disabled
      priority="secondary"
      size={size}
      skin={skin}
      ariaLabel={buttonAriaLabel}
    >
      {icon}
    </IconButton>
  );

  return (
    <Box verticalAlign="middle" align="center" width="100%">
      {tooltipContent ? (
        <DisabledTooltip
          dataHook={dataHook ? `${dataHook}-tooltip` : undefined}
          content={tooltipContent}
        >
          {button}
        </DisabledTooltip>
      ) : (
        button
      )}
    </Box>
  );
}