"use client";
import { jsx, jsxs } from "../../packages/jsx/src/jsx-runtime.js";
import { forwardRef, createContext, useContext } from "react";
import { Flex } from "../../atoms/Flex/Flex.js";
import { mapResponsiveStyleValue } from "../../theme/utils.js";
import { classNames } from "../../utils/classNames.js";
import { Spacing } from "../../tokens/Spacing.js";
import { Icon } from "../../atoms/Icon/Icon.js";
import { Text } from "../../atoms/Text/Text.js";
const DEFAULT_SIZE = "18px";
const gapSizes = {
  "14px": Spacing["12px"],
  "16px": Spacing["12px"],
  "18px": Spacing["16px"],
  "20px": Spacing["16px"],
  "24px": Spacing["16px"]
};
const leftPaddingSizes = {
  "14px": Spacing["4px"],
  "16px": Spacing["4px"],
  "18px": Spacing["8px"],
  "20px": Spacing["8px"],
  "24px": Spacing["8px"]
};
const markerBoxSizes = {
  "14px": "20px",
  "16px": "24px",
  "18px": "24px",
  "20px": "28px",
  "24px": "32px"
};
const markerNumberDotSizes = {
  "14px": "4px",
  "16px": "4px",
  "18px": "6px",
  "20px": "8px",
  "24px": "8px"
};
const markerArrowSizes = {
  "14px": "14px",
  "16px": "16px",
  "18px": "18px",
  "20px": "20px",
  "24px": "24px"
};
const markerBulletSizes = {
  "14px": "6px",
  "16px": "6px",
  "18px": "8px",
  "20px": "12px",
  "24px": "12px"
};
const ListContext = createContext({
  variant: null,
  size: null
});
const ListBase = forwardRef(
  ({ variant, size, className, children, ...props }, ref) => {
    return /* @__PURE__ */ jsx(ListContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx(
      Flex.Column,
      {
        ref,
        as: variant === "numbers" ? "ol" : "ul",
        gap: mapResponsiveStyleValue(size, DEFAULT_SIZE, (value) => gapSizes[value]),
        className: classNames(["gds-List", className]),
        sx: {
          counterReset: "li",
          pl: mapResponsiveStyleValue(size, DEFAULT_SIZE, (value) => leftPaddingSizes[value])
        },
        ...props,
        children
      }
    ) });
  }
);
ListBase.displayName = "List";
const ListNumbers = forwardRef((props, ref) => /* @__PURE__ */ jsx(ListBase, { ref, ...props, variant: "numbers" }));
ListNumbers.displayName = "List.Numbers";
const ListArrows = forwardRef((props, ref) => /* @__PURE__ */ jsx(ListBase, { ref, ...props, variant: "arrows" }));
ListArrows.displayName = "List.Arrows";
const ListBullets = forwardRef((props, ref) => /* @__PURE__ */ jsx(ListBase, { ref, ...props, variant: "bullets" }));
ListBullets.displayName = "List.Bullets";
const ListItem = ({ children, ...props }) => {
  const context = useContext(ListContext);
  if (context.variant === null) {
    return null;
  }
  return /* @__PURE__ */ jsxs(
    Text.P,
    {
      as: "li",
      size: mapResponsiveStyleValue(context.size, DEFAULT_SIZE),
      sx: {
        display: "grid",
        gridTemplateColumns: mapResponsiveStyleValue(
          context.size,
          DEFAULT_SIZE,
          (value) => `${markerBoxSizes[value]} 1fr`
        ),
        alignItems: "baseline",
        gap: Spacing["8px"]
      },
      ...props,
      children: [
        context.variant === "numbers" ? /* @__PURE__ */ jsxs(Flex.Row, { align: "center", children: [
          /* @__PURE__ */ jsx(
            "span",
            {
              sx: {
                flexGrow: 1,
                textAlign: "center",
                "&::before": {
                  content: "counter(li)",
                  counterIncrement: "li"
                }
              }
            }
          ),
          /* @__PURE__ */ jsx(
            Icon.DiamondSolid,
            {
              size: mapResponsiveStyleValue(context.size, DEFAULT_SIZE, (value) => markerNumberDotSizes[value])
            }
          )
        ] }) : context.variant === "arrows" ? /* @__PURE__ */ jsx(
          Icon.ArrowSpecialRight,
          {
            size: mapResponsiveStyleValue(context.size, DEFAULT_SIZE, (value) => markerArrowSizes[value]),
            sx: {
              justifySelf: "center",
              top: "0.12em"
            }
          }
        ) : /* @__PURE__ */ jsx(
          Icon.DiamondSolid,
          {
            size: mapResponsiveStyleValue(context.size, DEFAULT_SIZE, (value) => markerBulletSizes[value]),
            sx: { justifySelf: "center", top: "-0.16em" }
          }
        ),
        /* @__PURE__ */ jsx("span", { children })
      ]
    }
  );
};
ListItem.displayName = "List.Item";
const List = Object.assign(ListBase, {
  Numbers: ListNumbers,
  Arrows: ListArrows,
  Bullets: ListBullets,
  Item: ListItem
});
export {
  List
};
