import classNames from 'classnames';
import mergeRefs from "../utilities/mergeRefs";
import useAutofocus from "../utilities/useAutoFocus";
import useAlertAnalytics from "./useAlertAnalytics";
import { InfoCircleIcon, AlertCircleIcon, WarningIcon, CheckCircleIcon } from "../Icons";
import { t } from "../i18n";
import useId from "../utilities/useId";
import { jsx as _jsx, jsxs as _jsxs } from "preact/compat/jsx-runtime";
/**
 * For information about how and when to use this component,
 * [refer to its full documentation page](https://design.cms.gov/components/alert/).
 */
export const Alert = props => {
  const {
    headingRef,
    bodyRef
  } = useAlertAnalytics(props);
  const focusRef = useAutofocus(props.autoFocus);
  const rootId = useId('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__*/_jsx(Heading, {
      className: "ds-c-alert__heading",
      children: heading
    });
  }
  const classes = classNames('ds-c-alert', hideIcon && 'ds-c-alert--hide-icon', variation && `ds-c-alert--${variation}`, weight && `ds-c-alert--${weight}`, className);
  const a11yLabelText = t(`alert.${variation ?? 'defaultLabel'}`);
  const a11yLabel = /*#__PURE__*/_jsx("span", {
    className: "ds-c-alert__a11y-label ds-u-visibility--screen-reader",
    id: a11yLabelId,
    children: `${a11yLabelText}: `
  });
  const variationConfig = {
    error: {
      role: 'alert',
      icon: AlertCircleIcon
    },
    success: {
      role: 'status',
      icon: CheckCircleIcon
    },
    warn: {
      role: 'alert',
      icon: WarningIcon
    },
    default: {
      role: 'region',
      icon: 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__*/_jsx(IconComponent, {
      className: "ds-c-alert__icon"
    });
  }
  return /*#__PURE__*/_jsxs("div", {
    className: classes,
    ref: mergeRefs([alertRef, focusRef]),
    tabIndex: alertRef || autoFocus ? -1 : null,
    role: dynamicRole,
    "aria-labelledby": heading ? headingId : a11yLabelId,
    ...alertProps,
    children: [getIcon(), /*#__PURE__*/_jsxs("div", {
      className: "ds-c-alert__body",
      ref: bodyRef,
      children: [heading ? /*#__PURE__*/_jsxs("div", {
        id: headingId,
        className: "ds-c-alert__header ds-c-alert__heading",
        ref: headingRef,
        children: [a11yLabel, headingElement]
      }) : a11yLabel, children]
    })]
  });
};
Alert.defaultProps = {
  headingLevel: '2'
};
export default Alert;