import React, { cloneElement, useState } from 'react';
import cls from 'classnames';
import { faCircleCheck } from '@fortawesome/free-solid-svg-icons/faCircleCheck';
import { faCircleInfo } from '@fortawesome/free-solid-svg-icons/faCircleInfo';
import { faCircleXmark } from '@fortawesome/free-solid-svg-icons/faCircleXmark';
import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons/faCircleExclamation';
import { faBolt } from '@fortawesome/free-solid-svg-icons/faBolt';
import { faEye } from '@fortawesome/free-solid-svg-icons/faEye';
import { faEyeSlash } from '@fortawesome/free-solid-svg-icons/faEyeSlash';
import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { ACCENT_TYPES, Button } from '../button';
import { useTranslation } from '../hooks/use-translation';
import { TruncateWithTooltip } from '../truncate-with-tooltip';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export const ALERT_TYPES = {
  SUCCESS: 'success',
  INFO: 'info',
  WARNING: 'warning',
  FAILURE: 'failure'
};
/** Alert is used to notify users about significant events in the application
 * [CAPITALIZATION] Use sentence case for title, text, buttons
 * @midnight-gray-supported
 * @alpine-light-supported
 */

function Alert({
  className,
  type = ALERT_TYPES.INFO,
  header,
  children = '',
  testId,
  actionButtonText,
  dismissButtonText,
  docsLink,
  onTakeAction,
  onDismiss,
  footer,
  collapsedTextContent = false,
  collapsedContentShowMessageButtonText,
  collapsedContentHideMessageButtonText,
  takeActionIcon = faBolt,
  wordBreakHeader = false
}) {
  const {
    t
  } = useTranslation();
  const alertIcon = {
    [ALERT_TYPES.SUCCESS]: faCircleCheck,
    [ALERT_TYPES.INFO]: faCircleInfo,
    [ALERT_TYPES.WARNING]: faCircleExclamation,
    [ALERT_TYPES.FAILURE]: faCircleXmark
  };
  const [showMessage, setShowMessage] = useState(!collapsedTextContent);
  return /*#__PURE__*/_jsxs("div", {
    "test-id": testId,
    className: cls('alert', type, className, collapsedTextContent && 'collapsed'),
    role: "alert",
    children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
      icon: alertIcon[type],
      className: "alert-icon"
    }), /*#__PURE__*/_jsx("section", {
      className: "alert-section",
      "test-id": "alert-section",
      children: !showMessage ? /*#__PURE__*/_jsxs("div", {
        className: "show-more-header",
        children: [/*#__PURE__*/_jsx("div", {
          className: "alert-header",
          children: wordBreakHeader ? /*#__PURE__*/_jsx("p", {
            className: "break-word",
            children: header
          }) : /*#__PURE__*/_jsx(TruncateWithTooltip, {
            children: /*#__PURE__*/_jsx("p", {
              children: header
            })
          })
        }), /*#__PURE__*/_jsx(Button, {
          testId: "show-message",
          accentType: ACCENT_TYPES.COMMAND,
          onClick: () => setShowMessage(true),
          leftIcon: faEye,
          children: collapsedContentShowMessageButtonText ?? t('Show message')
        })]
      }) : /*#__PURE__*/_jsxs(_Fragment, {
        children: [/*#__PURE__*/_jsx("div", {
          className: "alert-header",
          children: wordBreakHeader ? /*#__PURE__*/_jsx("p", {
            className: "break-word",
            children: header
          }) : /*#__PURE__*/_jsx(TruncateWithTooltip, {
            children: /*#__PURE__*/_jsx("p", {
              children: header
            })
          })
        }), /*#__PURE__*/_jsx("div", {
          className: "alert-body",
          children: children
        }), footer || /*#__PURE__*/_jsxs("div", {
          className: "alert-footer",
          children: [onTakeAction && /*#__PURE__*/_jsx(Button, {
            testId: "take-action",
            accentType: ACCENT_TYPES.COMMAND,
            onClick: onTakeAction,
            leftIcon: takeActionIcon,
            children: actionButtonText
          }), docsLink && /*#__PURE__*/cloneElement(docsLink, {
            className: 'alert-docs-link'
          }), onDismiss && /*#__PURE__*/_jsx(Button, {
            testId: "dismiss",
            accentType: ACCENT_TYPES.COMMAND,
            onClick: onDismiss,
            leftIcon: faXmark,
            children: dismissButtonText ?? t('Dismiss')
          }), collapsedTextContent && /*#__PURE__*/_jsx(Button, {
            testId: "hide-message",
            accentType: ACCENT_TYPES.COMMAND,
            onClick: () => setShowMessage(false),
            leftIcon: faEyeSlash,
            children: collapsedContentHideMessageButtonText || t('Hide message')
          })]
        })]
      })
    })]
  });
}
export default Alert;