import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { createElement } from "react";
import { useState } from "react";
import { colorToString } from "../../../../../../utils/colorToString";
import { useResponsiveColor } from "../../../../../../hooks";
import { CaretDown8 } from "../../../../../../icons/CaretDown8";
import { Plus8 } from "../../../../../../icons/Plus8";
import { ArrowDown8 } from "../../../../../../icons/ArrowDown8";
import { ChevronDown8 } from "../../../../../../icons/ChevronDown8";
import { Link } from "../../../../../../shared/Link";
import Button from "../../../../../Button";
import { cx } from "@emotion/css";
import { useStyle } from "../../../../../../../runtimes/react/use-style";
import {
  useResponsiveStyle,
  useResponsiveTextStyle
} from "../../../../../../utils/responsive-style";
function DropDownMenu({ className, open, ...restOfProps }) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      ...restOfProps,
      className: cx(
        useStyle({ display: open ? "flex" : "none", flexDirection: "column", padding: 8 }),
        className
      )
    }
  );
}
function ButtonLink({ className, ...restOfProps }) {
  return /* @__PURE__ */ jsx(Button, { ...restOfProps, className: cx(useStyle({ margin: "8px 0" }), className) });
}
function DropDownItem({ color, className, textStyle, ...restOfProps }) {
  const colorData = useResponsiveColor(color);
  return /* @__PURE__ */ jsx(
    Link,
    {
      ...restOfProps,
      className: cx(
        useStyle({
          textDecoration: "none",
          lineHeight: 1.4,
          padding: "8px 16px",
          color: "black"
        }),
        useStyle(useResponsiveTextStyle(textStyle)),
        useStyle(
          useResponsiveStyle([colorData], ([color2]) => ({
            color: color2 == null ? "black" : colorToString(color2)
          }))
        ),
        className
      )
    }
  );
}
function MobileDropDownButton({
  label,
  caret,
  links = [],
  onClose = () => {
  },
  color,
  textColor,
  ...restOfProps
}) {
  const [isOpen, setIsOpen] = useState(false);
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      ButtonLink,
      {
        ...restOfProps,
        textColor: useResponsiveColor(textColor),
        color: useResponsiveColor(color),
        onPointerDown: () => setIsOpen((prev) => !prev),
        children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
          /* @__PURE__ */ jsx("span", { style: { marginRight: 6 }, children: label }),
          /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", fill: "currentColor" }, children: /* @__PURE__ */ jsxs(Fragment, { children: [
            caret === "caret" && /* @__PURE__ */ jsx(CaretDown8, {}),
            caret === "plus" && /* @__PURE__ */ jsx(Plus8, {}),
            caret === "arrow-down" && /* @__PURE__ */ jsx(ArrowDown8, {}),
            caret === "chevron-down" && /* @__PURE__ */ jsx(ChevronDown8, {})
          ] }) })
        ] })
      }
    ),
    /* @__PURE__ */ jsx(DropDownMenu, { open: isOpen, children: links.map(({ id, payload }) => /* @__PURE__ */ createElement(DropDownItem, { ...payload, key: id, onClick: onClose }, payload.label)) })
  ] });
}
export {
  MobileDropDownButton as default
};
//# sourceMappingURL=index.js.map