import React from 'react';
import classnames from 'classnames';
import { Button, ACCENT_TYPES } from '../button';
import { useTranslation } from '../hooks/use-translation';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function checkForMultiplePrimaryButtons(actionParamsProp) {
  let primaryButtonsCount = 0;
  actionParamsProp.forEach(item => {
    // we need to check whether onActionBtnType is primary or undefined as undefined will default to primary
    if (item?.onActionBtnType === ACCENT_TYPES.PRIMARY || !item?.onActionBtnType) {
      primaryButtonsCount++;
    }
  });
  // if number of primary buttons is more than 1 - raise the error
  if (primaryButtonsCount > 1) {
    return new Error(`More then one primary buttons passed. Check onActionBtnType prop.`);
  }
}
/** EmptyState displays a missing content container with title, description
 * and action button, that helps you to get going without wondering what to do next
 * [CAPITALIZATION] Use sentence case for title, description and buttons
 * @midnight-gray-supported
 * @alpine-light-supported
 * */
const EmptyState = ({
  imageSrc,
  title,
  description,
  actionParams = [],
  originalImageSize = false,
  testId = 'empty-state',
  altText,
  className = '',
  customContentTop,
  customContentBottom
}) => {
  const {
    t
  } = useTranslation();
  const actionParamsProps = Array.isArray(actionParams) ? actionParams : [actionParams];
  if (actionParamsProps.length) {
    checkForMultiplePrimaryButtons(actionParamsProps);
  }
  return /*#__PURE__*/_jsxs("div", {
    "aria-live": "polite",
    "test-id": testId,
    className: classnames('empty-state', className),
    children: [imageSrc && /*#__PURE__*/_jsx("img", {
      "test-id": "empty-state-img",
      className: originalImageSize ? 'original-image-size' : undefined,
      src: imageSrc,
      alt: altText ?? t('Empty state')
    }), customContentTop, title && /*#__PURE__*/_jsx("div", {
      "test-id": "empty-state-title",
      className: "empty-state-title",
      children: title
    }), description && /*#__PURE__*/_jsx("p", {
      "test-id": "empty-state-description",
      className: "empty-state-description",
      children: description
    }), actionParams && /*#__PURE__*/_jsx("div", {
      className: "empty-state-action-buttons-container",
      children: actionParamsProps.map(actionParamItem => {
        return /*#__PURE__*/_jsx(Button, {
          testId: "empty-state-action-btn",
          onClick: actionParamItem.onActionBtnClick,
          accentType: actionParamItem.onActionBtnType,
          className: "empty-state-action-btn",
          isDisabled: actionParamItem.onActionButtonDisabled,
          tooltipText: actionParamItem.onActionButtonTooltipText,
          tooltipPlacement: actionParamItem.onActionButtonTooltipPlacement || 'bottom',
          leftIcon: actionParamItem.onActionBtnIcon,
          isLoading: actionParamItem.onActionBtnIsLoading,
          loadingText: actionParamItem.onActionBtnLoadingText,
          fullWidth: actionParamItem.fullWidth,
          children: /*#__PURE__*/_jsx("span", {
            "test-id": "empty-state-action-btn-text",
            children: actionParamItem.onActionBtnText
          })
        }, actionParamItem.onActionBtnText);
      })
    }), customContentBottom]
  });
};
export const EMPTY_STATE_BUTTON_TYPES = {
  PRIMARY: ACCENT_TYPES.PRIMARY,
  SECONDARY: ACCENT_TYPES.SECONDARY,
  COMMAND: ACCENT_TYPES.COMMAND
};
export default EmptyState;