import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { cx } from "@emotion/css";
import { forwardRef } from "react";
import { useStyle } from "../../../../../../../../../runtimes/react/use-style";
import { useResponsiveStyle } from "../../../../../../../../utils/responsive-style";
import { useFormContext, Sizes, Contrasts } from "../../../../../../context/FormContext";
import responsiveField, {
  getSizeHeight,
  getSizeHorizontalPadding,
  getContrastColor
} from "../../../../services/responsiveField";
import Label from "../../../Label";
function Container({
  shape,
  size,
  contrast,
  brandColor,
  error,
  className,
  ...restOfProps
}) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      ...restOfProps,
      className: cx(
        useStyle(responsiveField({ shape, size, contrast, brandColor, error })),
        useStyle({
          display: "flex",
          alignItems: "center",
          position: "relative",
          userSelect: "none",
          borderColor: "#f19eb9",
          "&:focus, &:focus-within": {
            borderColor: "#e54e7f"
          },
          ...useResponsiveStyle(
            [size, contrast],
            ([size2 = Sizes.MEDIUM, contrast2 = Contrasts.LIGHT]) => ({
              minHeight: getSizeHeight(size2),
              maxHeight: getSizeHeight(size2),
              "&::after": {
                content: '""',
                position: "absolute",
                right: getSizeHorizontalPadding(size2),
                top: "50%",
                transform: "translate3d(0, -25%, 0)",
                border: "solid 0.35em transparent",
                borderTopColor: getContrastColor(contrast2)
              }
            })
          )
        }),
        className
      )
    }
  );
}
const Select = forwardRef(function Select2({ className, ...restOfProps }, ref) {
  return /* @__PURE__ */ jsx(
    "select",
    {
      ...restOfProps,
      ref,
      className: cx(
        useStyle({
          appearance: "none",
          position: "absolute",
          top: 0,
          left: 0,
          opacity: 0,
          width: "100%",
          height: "100%"
        }),
        className
      )
    }
  );
});
var TableColumnSingleSelect_default = forwardRef(function TableColumnSingleSelect({
  id,
  tableColumn,
  value = "",
  label = "",
  error = false,
  hideLabel = false,
  form,
  ...restOfProps
}, ref) {
  const { shape, size, contrast, brandColor } = useFormContext();
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    !hideLabel && /* @__PURE__ */ jsx(Label, { htmlFor: id, children: label }),
    /* @__PURE__ */ jsxs(
      Container,
      {
        error,
        shape,
        size,
        contrast,
        brandColor,
        children: [
          /* @__PURE__ */ jsx("span", { children: value === "" ? "-" : value }),
          /* @__PURE__ */ jsxs(Select, { ...restOfProps, "aria-label": label, ref, id, value, children: [
            /* @__PURE__ */ jsx("option", { value: "", children: "-" }),
            tableColumn.options.map((option) => /* @__PURE__ */ jsx("option", { value: option.name, children: option.name }, option.id))
          ] })
        ]
      }
    )
  ] });
});
export {
  TableColumnSingleSelect_default as default
};
//# sourceMappingURL=index.js.map