import { jsx, jsxs } from "react/jsx-runtime";
import { createElement } from "react";
import { forwardRef, useRef, useState } from "react";
import { CaretDown8 } from "../../../../icons/CaretDown8";
import { Plus8 } from "../../../../icons/Plus8";
import { ArrowDown8 } from "../../../../icons/ArrowDown8";
import { ChevronDown8 } from "../../../../icons/ChevronDown8";
import { colorToString } from "../../../../utils/colorToString";
import { useResponsiveColor } from "../../../../hooks";
import { Link } from "../../../../shared/Link";
import Button from "../../../Button";
import { useIsomorphicLayoutEffect } from "../../../../hooks/useIsomorphicLayoutEffect";
import { cx, keyframes } from "@emotion/css";
import { useStyle } from "../../../../../runtimes/react/use-style";
import { useResponsiveStyle, useResponsiveTextStyle } from "../../../../utils/responsive-style";
const DROP_DOWN_MENU_WIDTH = 200;
const DROP_DOWN_MENU_CLASS_NAME = "drop-down-menu";
function DropDownMenu({ className, position, ...restOfProps }) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      ...restOfProps,
      className: cx(
        DROP_DOWN_MENU_CLASS_NAME,
        useStyle({
          position: "absolute",
          top: "100%",
          left: position === "left" ? 0 : "auto",
          right: position === "right" ? 0 : "auto",
          background: "#fff",
          margin: 0,
          padding: "8px 0",
          borderRadius: 4,
          boxShadow: "0 3px 10px rgba(0, 0, 0, 0.15)",
          width: DROP_DOWN_MENU_WIDTH,
          zIndex: 99,
          listStyle: "none",
          overflow: "hidden",
          transformOrigin: "50% 0",
          willChange: "transform, opacity",
          transformStyle: "preserve-3d",
          display: "none"
        }),
        className
      )
    }
  );
}
const dropIn = keyframes`
  0% {
      opacity: 0;
      transform: rotateX(-20deg);
  }
  100% {
      opacity: 1;
      transform: none;
  }
`;
const DropDownContainer = forwardRef(function DropDownContainer2({ className, ...restOfProps }, ref) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      ...restOfProps,
      ref,
      className: cx(
        useStyle({
          position: "relative",
          [`&:hover .${DROP_DOWN_MENU_CLASS_NAME}`]: {
            display: "block",
            animation: `${dropIn} 0.25s`
          }
        }),
        className
      )
    }
  );
});
function DropDownItem({ className, color, textStyle, ...restOfProps }) {
  const colorData = useResponsiveColor(color);
  return /* @__PURE__ */ jsx(
    Link,
    {
      ...restOfProps,
      className: cx(
        useStyle({
          display: "block",
          textDecoration: "none",
          lineHeight: 1.4,
          padding: "8px 16px",
          color: "black",
          backgroundColor: "transparent",
          transition: "background-color 0.2s"
        }),
        useStyle(useResponsiveTextStyle(textStyle)),
        useStyle(
          useResponsiveStyle([colorData, textStyle], ([color2, textStyle2 = {}]) => {
            const fontSize = textStyle2.fontSize || { value: 14, unit: "px" };
            const fontWeight = textStyle2.fontWeight == null ? "normal" : textStyle2.fontWeight;
            const fontStyle = textStyle2.fontStyle || [];
            const letterSpacing = textStyle2.letterSpacing == null ? null : textStyle2.letterSpacing;
            const textTransform = textStyle2.textTransform || [];
            return {
              color: color2 == null ? "black" : colorToString(color2),
              fontSize: `${fontSize.value}${fontSize.unit}`,
              fontWeight,
              fontStyle: fontStyle.includes("italic") ? "italic" : "normal",
              letterSpacing: letterSpacing == null ? "normal" : `${letterSpacing}px`,
              textTransform: textTransform.includes("uppercase") ? "uppercase" : "none"
            };
          })
        ),
        useStyle({
          "&:hover": {
            backgroundColor: "rgba(0, 0, 0, 0.04)"
          }
        }),
        className
      )
    }
  );
}
function DropDownButton({
  label,
  caret = "caret",
  links = [],
  textColor,
  color,
  ...restOfProps
}) {
  const container = useRef(null);
  const [position, setPosition] = useState("left");
  useIsomorphicLayoutEffect(() => {
    if (container.current && container.current.ownerDocument.defaultView.innerWidth < container.current.offsetLeft + DROP_DOWN_MENU_WIDTH) {
      setPosition("right");
    } else {
      setPosition("left");
    }
  }, [setPosition]);
  return /* @__PURE__ */ jsxs(DropDownContainer, { ref: container, children: [
    /* @__PURE__ */ jsx(
      Button,
      {
        ...restOfProps,
        textColor: useResponsiveColor(textColor),
        color: useResponsiveColor(color),
        children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
          /* @__PURE__ */ jsx("span", { style: { marginRight: 6 }, children: label }),
          /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", fill: "currentColor" }, 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, { position, children: links.map(({ id, payload }) => /* @__PURE__ */ createElement(DropDownItem, { ...payload, key: id }, payload.label)) })
  ] });
}
export {
  DropDownButton as default
};
//# sourceMappingURL=index.js.map