"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Alert = void 0;
var _classnames = _interopRequireDefault(require("classnames"));
var _mergeRefs = _interopRequireDefault(require("../utilities/mergeRefs"));
var _useAutoFocus = _interopRequireDefault(require("../utilities/useAutoFocus"));
var _useAlertAnalytics = _interopRequireDefault(require("./useAlertAnalytics"));
var _Icons = require("../Icons");
var _i18n = require("../i18n");
var _useId = _interopRequireDefault(require("../utilities/useId"));
var _jsxRuntime = require("preact/compat/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
 * For information about how and when to use this component,
 * [refer to its full documentation page](https://design.cms.gov/components/alert/).
 */
const Alert = props => {
  const {
    headingRef,
    bodyRef
  } = (0, _useAlertAnalytics.default)(props);
  const focusRef = (0, _useAutoFocus.default)(props.autoFocus);
  const rootId = (0, _useId.default)('alert--', props.id);
  const headingId = props.headingId ?? `${rootId}__heading`;
  const a11yLabelId = `${rootId}__a11y-label`;
  if (process.env.NODE_ENV !== 'production') {
    if (!props.heading && !props.children) {
      console.warn(`Empty <Alert> components are not allowed, please use the 'heading' prop or include children.`);
    }
  }
  const {
    children,
    className,
    autoFocus,
    heading,
    headingId: _headingId,
    headingLevel,
    hideIcon,
    alertRef,
    role,
    variation,
    weight,
    analytics,
    analyticsLabelOverride,
    onAnalyticsEvent,
    ...alertProps
  } = props;
  let headingElement;
  if (heading) {
    const Heading = `h${headingLevel}`;
    headingElement = /*#__PURE__*/(0, _jsxRuntime.jsx)(Heading, {
      className: "ds-c-alert__heading",
      children: heading
    });
  }
  const classes = (0, _classnames.default)('ds-c-alert', hideIcon && 'ds-c-alert--hide-icon', variation && `ds-c-alert--${variation}`, weight && `ds-c-alert--${weight}`, className);
  const a11yLabelText = (0, _i18n.t)(`alert.${variation ?? 'defaultLabel'}`);
  const a11yLabel = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
    className: "ds-c-alert__a11y-label ds-u-visibility--screen-reader",
    id: a11yLabelId,
    children: `${a11yLabelText}: `
  });
  const variationConfig = {
    error: {
      role: 'alert',
      icon: _Icons.AlertCircleIcon
    },
    success: {
      role: 'status',
      icon: _Icons.CheckCircleIcon
    },
    warn: {
      role: 'alert',
      icon: _Icons.WarningIcon
    },
    default: {
      role: 'region',
      icon: _Icons.InfoCircleIcon
    }
  };
  const dynamicRole = role ?? (variationConfig[variation]?.role || variationConfig.default.role);
  function getIcon() {
    if (hideIcon) {
      return null;
    }
    const IconComponent = variationConfig[variation]?.icon || variationConfig.default.icon;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
      className: "ds-c-alert__icon"
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: classes,
    ref: (0, _mergeRefs.default)([alertRef, focusRef]),
    tabIndex: alertRef || autoFocus ? -1 : null,
    role: dynamicRole,
    "aria-labelledby": heading ? headingId : a11yLabelId,
    ...alertProps,
    children: [getIcon(), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "ds-c-alert__body",
      ref: bodyRef,
      children: [heading ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        id: headingId,
        className: "ds-c-alert__header ds-c-alert__heading",
        ref: headingRef,
        children: [a11yLabel, headingElement]
      }) : a11yLabel, children]
    })]
  });
};
exports.Alert = Alert;
Alert.defaultProps = {
  headingLevel: '2'
};
var _default = exports.default = Alert;