import { clsx } from 'clsx';
import { useEffect, useState, useRef } from 'react';
import Body from '../body/Body.mjs';
import '../common/theme.mjs';
import '../common/direction.mjs';
import '../common/propsValues/control.mjs';
import '../common/propsValues/breakpoint.mjs';
import { Size } from '../common/propsValues/size.mjs';
import { Typography } from '../common/propsValues/typography.mjs';
import '../common/propsValues/width.mjs';
import '../common/propsValues/type.mjs';
import '../common/propsValues/dateMode.mjs';
import '../common/propsValues/monthFormat.mjs';
import '../common/propsValues/position.mjs';
import '../common/propsValues/layouts.mjs';
import '../common/propsValues/status.mjs';
import { Sentiment } from '../common/propsValues/sentiment.mjs';
import '../common/propsValues/profileType.mjs';
import '../common/propsValues/variant.mjs';
import '../common/propsValues/scroll.mjs';
import '../common/propsValues/markdownNodeType.mjs';
import '../common/fileType.mjs';
import { WDS_LIVE_REGION_DELAY_MS } from '../common/constants.mjs';
import { CloseButton } from '../common/closeButton/CloseButton.mjs';
import StatusIcon from '../statusIcon/StatusIcon.mjs';
import Title from '../title/Title.mjs';
import { logActionRequired } from '../utilities/logActionRequired.mjs';
import InlineMarkdown from './inlineMarkdown/InlineMarkdown.mjs';
import { Action } from '../common/action/Action.mjs';
import { jsx, jsxs } from 'react/jsx-runtime';

var AlertArrowPosition;
(function (AlertArrowPosition) {
  AlertArrowPosition["TOP_LEFT"] = "up-left";
  AlertArrowPosition["TOP"] = "up-center";
  AlertArrowPosition["TOP_RIGHT"] = "up-right";
  AlertArrowPosition["BOTTOM_LEFT"] = "down-left";
  AlertArrowPosition["BOTTOM"] = "down-center";
  AlertArrowPosition["BOTTOM_RIGHT"] = "down-right";
})(AlertArrowPosition || (AlertArrowPosition = {}));
function resolveType(type) {
  switch (type) {
    case 'success':
      return 'positive';
    case 'info':
      return 'neutral';
    case 'error':
      return 'negative';
    default:
      return type;
  }
}
function Alert({
  action,
  className,
  icon,
  statusIconLabel,
  onDismiss,
  message,
  title,
  type = 'neutral',
  variant = 'desktop',
  arrow,
  children,
  size,
  dismissible,
  active = true,
  dynamicRender
}) {
  useEffect(() => {
    if (active !== undefined || dynamicRender !== undefined) {
      logActionRequired("Alert component doesn't support `active` or `dynamicRender` anymore, please remove that prop.");
    }
  }, [active, dynamicRender]);
  useEffect(() => {
    if (arrow !== undefined) {
      logActionRequired("Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.");
    }
  }, [arrow]);
  useEffect(() => {
    if (children !== undefined) {
      logActionRequired("Alert component doesn't support 'children' anymore, use 'message' instead.");
    }
  }, [children]);
  useEffect(() => {
    if (dismissible !== undefined) {
      logActionRequired("Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.");
    }
  }, [dismissible]);
  useEffect(() => {
    if (size !== undefined) {
      logActionRequired("Alert component doesn't support 'size' anymore, please remove that prop.");
    }
  }, [size]);
  const resolvedType = resolveType(type);
  useEffect(() => {
    if (resolvedType !== type) {
      logActionRequired(`Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`);
    }
  }, [resolvedType, type]);
  const [shouldFire, setShouldFire] = useState();
  const [shouldAnnounce, setShouldAnnounce] = useState(false);
  useEffect(() => {
    setTimeout(() => {
      setShouldAnnounce(true);
    }, WDS_LIVE_REGION_DELAY_MS);
  }, []);
  const closeButtonReference = useRef(null);
  return /*#__PURE__*/jsx("div", {
    role: resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status',
    className: "wds-alert__liveRegion",
    children: active && /*#__PURE__*/jsxs("div", {
      "aria-hidden": shouldAnnounce ? undefined : 'true',
      className: clsx('alert d-flex', `alert-${resolvedType}`, arrow != null && alertArrowClassNames(arrow), className),
      "data-testid": "alert",
      onTouchStart: () => setShouldFire(true),
      onTouchEnd: event => {
        if (shouldFire && action?.href &&
        // Check if current event is triggered from closeButton
        event.target instanceof Node && closeButtonReference.current && !closeButtonReference.current.contains(event.target)) {
          if (action.target === '_blank') {
            window.top?.open(action.href);
          } else {
            window.top?.location.assign(action.href);
          }
        }
        setShouldFire(false);
      },
      onTouchMove: () => setShouldFire(false),
      children: [/*#__PURE__*/jsxs("div", {
        className: clsx('alert__content', 'd-flex', 'flex-grow-1', variant),
        "data-testid": variant,
        children: [icon ? /*#__PURE__*/jsx("div", {
          className: "alert__icon",
          children: icon
        }) : /*#__PURE__*/jsx(StatusIcon, {
          size: Size.LARGE,
          sentiment: resolvedType,
          iconLabel: statusIconLabel
        }), /*#__PURE__*/jsxs("div", {
          className: "alert__message",
          children: [/*#__PURE__*/jsxs("div", {
            children: [title && /*#__PURE__*/jsx(Title, {
              className: "m-b-1",
              type: Typography.TITLE_BODY,
              children: title
            }), /*#__PURE__*/jsx(Body, {
              as: "span",
              className: "d-block",
              type: Typography.BODY_LARGE,
              children: children || /*#__PURE__*/jsx(InlineMarkdown, {
                children: message
              })
            })]
          }), action && /*#__PURE__*/jsx(Action, {
            action: action,
            variant: "action-button",
            className: "m-t-1"
          })]
        })]
      }), onDismiss && /*#__PURE__*/jsx(CloseButton, {
        ref: closeButtonReference,
        className: "m-l-2",
        onClick: onDismiss
      })]
    })
  });
}
function alertArrowClassNames(arrow) {
  switch (arrow) {
    case 'down-center':
      return 'arrow arrow-bottom arrow-center';
    case 'down-left':
      return 'arrow arrow-bottom arrow-left';
    case 'down-right':
      return 'arrow arrow-bottom arrow-right';
    case 'up-center':
      return 'arrow arrow-center';
    case 'up-right':
      return 'arrow arrow-right';
    case 'up-left':
    default:
      return 'arrow';
  }
}

export { AlertArrowPosition, Alert as default };
//# sourceMappingURL=Alert.mjs.map
