import { jsx, jsxs } from "react/jsx-runtime";
import { forwardRef, useRef, Fragment } from "react";
import { RemoveScroll } from "react-remove-scroll";
import { Box } from "../../Box/Box.mjs";
import { normalizeKey } from "../../Autosuggest/Autosuggest.mjs";
import { Heading } from "../../Heading/Heading.mjs";
import { Stack } from "../../Stack/Stack.mjs";
import { Columns } from "../../Columns/Columns.mjs";
import { Column } from "../../Column/Column.mjs";
import { Overlay, IconClear } from "../../Accordion/AccordionItem.mjs";
import { Bleed } from "../../Button/Button.mjs";
import { ContentBlock } from "../../ContentBlock/ContentBlock.mjs";
import { buildDataAttributes } from "../../Accordion/Accordion.mjs";
import { ButtonIcon } from "../../ButtonIcon/ButtonIcon.mjs";
import { headingRoot, headingFocus, pointerEventsAll, maxSize, closeIconOffset } from "./Modal.css.mjs";
const validPageBlockComponents = [
  "div",
  "article",
  "aside",
  "main",
  "section",
  "nav"
];
const gutters = { mobile: "xsmall", tablet: "gutter" };
const PageBlock = ({
  children,
  width = "large",
  component: componentProp,
  data,
  ...restProps
}) => {
  const component = componentProp && validPageBlockComponents.includes(componentProp) ? componentProp : "div";
  return /* @__PURE__ */ jsx(
    Box,
    {
      component,
      paddingX: gutters,
      ...buildDataAttributes({ data, validateRestProps: restProps }),
      children: /* @__PURE__ */ jsx(ContentBlock, { width, children })
    }
  );
};
const modalPadding = { mobile: "gutter", tablet: "large" };
const ModalContentHeader = forwardRef(
  ({ title, headingLevel, description, descriptionId, center }, ref) => /* @__PURE__ */ jsxs(
    Stack,
    {
      space: headingLevel === "2" ? { mobile: "small", tablet: "medium" } : "small",
      children: [
        /* @__PURE__ */ jsx(Heading, { level: headingLevel, align: center ? "center" : void 0, children: /* @__PURE__ */ jsxs(
          Box,
          {
            ref,
            component: "span",
            tabIndex: -1,
            outline: "none",
            position: "relative",
            className: headingRoot,
            children: [
              title,
              /* @__PURE__ */ jsx(
                Overlay,
                {
                  boxShadow: "outlineFocus",
                  borderRadius: "standard",
                  transition: "fast",
                  className: headingFocus,
                  onlyVisibleForKeyboardNavigation: true
                }
              )
            ]
          }
        ) }),
        description ? /* @__PURE__ */ jsx(Box, { id: descriptionId, children: description }) : null
      ]
    }
  )
);
const ModalContent = ({
  id,
  children,
  description,
  onClose,
  width,
  closeLabel = "Close",
  illustration,
  title,
  headingRef: headingRefProp,
  modalRef: modalRefProp,
  scrollLock = true,
  position,
  headingLevel,
  data,
  ...restProps
}) => {
  const defaultModalRef = useRef(null);
  const modalRef = modalRefProp || defaultModalRef;
  const defaultHeadingRef = useRef(null);
  const headingRef = headingRefProp || defaultHeadingRef;
  const descriptionId = `${id}_desc`;
  const handleEscape = (event) => {
    const targetKey = normalizeKey(event);
    if (targetKey === "Escape") {
      event.stopPropagation();
      onClose();
    }
  };
  const justifyContent = { left: "flexStart", center: "center", right: "flexEnd" }[position];
  const modalRadius = position === "center" ? "xlarge" : void 0;
  return /* @__PURE__ */ jsx(
    Box,
    {
      role: "dialog",
      "aria-label": title,
      "aria-describedby": description ? descriptionId : void 0,
      "aria-modal": "true",
      id,
      onKeyDown: handleEscape,
      position: "relative",
      width: "full",
      height: "full",
      display: "flex",
      alignItems: "center",
      justifyContent,
      children: /* @__PURE__ */ jsxs(
        Box,
        {
          position: "relative",
          display: "flex",
          alignItems: "center",
          justifyContent,
          height: position === "right" || position === "left" ? "full" : void 0,
          overflow: position !== "center" ? "hidden" : void 0,
          boxShadow: "large",
          borderRadius: modalRadius,
          width: width !== "content" ? "full" : void 0,
          maxWidth: width !== "content" ? width : void 0,
          children: [
            /* @__PURE__ */ jsx(RemoveScroll, { ref: modalRef, forwardProps: true, enabled: scrollLock, children: /* @__PURE__ */ jsx(
              Box,
              {
                background: "surface",
                borderRadius: modalRadius,
                overflow: "auto",
                position: "relative",
                width: width !== "content" ? "full" : void 0,
                height: position === "right" || position === "left" ? "full" : void 0,
                paddingY: modalPadding,
                paddingX: position !== "center" ? gutters : modalPadding,
                className: [
                  pointerEventsAll,
                  position === "center" && maxSize[position]
                ],
                ...buildDataAttributes({ data, validateRestProps: restProps }),
                children: /* @__PURE__ */ jsxs(Stack, { space: "large", children: [
                  illustration ? /* @__PURE__ */ jsxs(Stack, { space: "medium", align: "center", children: [
                    /* @__PURE__ */ jsx(Box, { paddingX: "gutter", children: illustration }),
                    /* @__PURE__ */ jsx(
                      ModalContentHeader,
                      {
                        title,
                        headingLevel,
                        description,
                        descriptionId,
                        center: Boolean(illustration),
                        ref: headingRef
                      }
                    )
                  ] }) : /* @__PURE__ */ jsxs(Columns, { space: "none", children: [
                    /* @__PURE__ */ jsx(Column, { children: /* @__PURE__ */ jsx(
                      ModalContentHeader,
                      {
                        title,
                        headingLevel,
                        description,
                        descriptionId,
                        center: Boolean(illustration),
                        ref: headingRef
                      }
                    ) }),
                    /* @__PURE__ */ jsx(Column, { width: "content", children: /* @__PURE__ */ jsx(Box, { width: "touchable" }) })
                  ] }),
                  /* @__PURE__ */ jsx(Fragment, { children })
                ] })
              }
            ) }),
            /* @__PURE__ */ jsx(
              Box,
              {
                position: "absolute",
                zIndex: "sticky",
                top: 0,
                pointerEvents: "none",
                width: "full",
                display: "flex",
                justifyContent: "flexEnd",
                paddingTop: modalPadding,
                paddingRight: position !== "center" ? gutters : modalPadding,
                className: position === "center" && maxSize[position],
                children: /* @__PURE__ */ jsx(Bleed, { space: "xsmall", children: /* @__PURE__ */ jsx(
                  Box,
                  {
                    position: "relative",
                    background: "surface",
                    borderRadius: "full",
                    padding: "xsmall",
                    className: [closeIconOffset, pointerEventsAll],
                    children: /* @__PURE__ */ jsx(
                      ButtonIcon,
                      {
                        id: `${id}-close`,
                        label: closeLabel,
                        icon: /* @__PURE__ */ jsx(IconClear, {}),
                        tone: "secondary",
                        variant: "transparent",
                        size: "large",
                        onClick: onClose
                      }
                    )
                  }
                ) })
              }
            )
          ]
        }
      )
    }
  );
};
export {
  ModalContent,
  PageBlock
};
