import { jsxs, jsx } from "react/jsx-runtime";
import { Box } from "../Box/Box.mjs";
import { Columns } from "../Columns/Columns.mjs";
import { Column } from "../Column/Column.mjs";
import { Overlay, IconClear, IconPositive, IconInfo, IconPromote, IconCaution, IconCritical } from "../Accordion/AccordionItem.mjs";
import { useBackground } from "../Box/BackgroundContext.mjs";
import { textAlignedToIcon } from "../../css/textAlignedToIcon.css.mjs";
import { buildDataAttributes } from "../Accordion/Accordion.mjs";
import { virtualTouchable } from "../private/touchable/virtualTouchable.mjs";
import { iconContainerSize } from "../../hooks/useIcon/index.mjs";
import { useBraidTheme } from "../../../../side-effects/lib/components/BraidProvider/BraidProvider.mjs";
import { closeButton, closeButtonFocus, closeButtonHover } from "./Alert.css.mjs";
const borderRadius = "large";
const backgroundForTone = {
  promote: "promoteLight",
  info: "infoLight",
  positive: "positiveLight",
  caution: "cautionLight",
  critical: "criticalLight"
};
const borderForTone = {
  promote: "borderPromoteLight",
  info: "borderInfoLight",
  positive: "borderPositiveLight",
  caution: "borderCautionLight",
  critical: "borderCriticalLight"
};
const icons = {
  positive: IconPositive,
  info: IconInfo,
  promote: IconPromote,
  caution: IconCaution,
  critical: IconCritical
};
const Alert = ({
  tone = "info",
  children,
  id,
  closeLabel = "Close",
  data,
  onClose,
  ...restProps
}) => {
  const isLegacyTheme = useBraidTheme().legacy;
  const parentBackground = useBackground();
  const Icon = icons[tone];
  return /* @__PURE__ */ jsxs(
    Box,
    {
      id,
      background: backgroundForTone[tone],
      paddingY: "medium",
      paddingX: "gutter",
      borderRadius,
      position: "relative",
      overflow: "hidden",
      role: "alert",
      "aria-live": "polite",
      ...buildDataAttributes({ data, validateRestProps: restProps }),
      children: [
        /* @__PURE__ */ jsxs(Columns, { space: "small", children: [
          /* @__PURE__ */ jsx(Column, { width: "content", children: /* @__PURE__ */ jsx(Icon, { tone }) }),
          /* @__PURE__ */ jsx(Column, { children: /* @__PURE__ */ jsx(Box, { className: textAlignedToIcon.standard, children }) }),
          onClose ? /* @__PURE__ */ jsx(Column, { width: "content", children: /* @__PURE__ */ jsxs(
            Box,
            {
              component: "button",
              "aria-label": closeLabel,
              borderRadius: "full",
              cursor: "pointer",
              position: "relative",
              onClick: onClose,
              outline: "none",
              transition: "touchable",
              transform: { active: "touchable" },
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              className: [
                closeButton,
                iconContainerSize(),
                virtualTouchable()
              ],
              children: [
                /* @__PURE__ */ jsx(
                  Overlay,
                  {
                    component: "span",
                    boxShadow: "outlineFocus",
                    transition: "fast",
                    onlyVisibleForKeyboardNavigation: true,
                    borderRadius: "full",
                    className: closeButtonFocus
                  }
                ),
                /* @__PURE__ */ jsx(
                  Overlay,
                  {
                    component: "span",
                    background: "surface",
                    transition: "fast",
                    borderRadius: "full",
                    className: closeButtonHover
                  }
                ),
                /* @__PURE__ */ jsx(
                  Box,
                  {
                    component: "span",
                    display: "block",
                    zIndex: 1,
                    position: "relative",
                    children: /* @__PURE__ */ jsx(IconClear, { size: "fill", tone })
                  }
                )
              ]
            }
          ) }) : null
        ] }),
        isLegacyTheme && parentBackground.lightMode !== "surface" && /* @__PURE__ */ jsx(
          Overlay,
          {
            borderRadius,
            boxShadow: { lightMode: borderForTone[tone] },
            visible: true
          }
        )
      ]
    }
  );
};
export {
  Alert
};
