import { jsx, jsxs } from "react/jsx-runtime";
import {
  forwardRef,
  useRef,
  useImperativeHandle
} from "react";
import Label from "../Label";
import Checkbox from "../Checkbox";
import { cx } from "@emotion/css";
import { useStyle } from "../../../../../../../runtimes/react/use-style";
function MainLabel({ className, ...restOfProps }) {
  return /* @__PURE__ */ jsx(Label, { ...restOfProps, className: cx(useStyle({ margin: "0 0 4px 0" }), className) });
}
function StyledLabel({ className, ...restOfProps }) {
  return /* @__PURE__ */ jsx(
    Label,
    {
      ...restOfProps,
      className: cx(
        useStyle({
          display: "flex",
          alignItems: "center",
          margin: "8px 0",
          "&:last-of-type": { marginBottom: 0 }
        }),
        className
      )
    }
  );
}
function CheckboxContainer({ className, ...restOfProps }) {
  return /* @__PURE__ */ jsx("span", { ...restOfProps, className: cx(useStyle({ marginRight: 8 }), className) });
}
var MultipleSelectTableField_default = forwardRef(function MultipleSelectTableField({
  tableColumn,
  label = "",
  required,
  value = [],
  onChange,
  hideLabel = false,
  ...restOfProps
}, ref) {
  const handle = useRef({
    validity: { valueMissing: required === true && value.length === 0, typeMismatch: false }
  });
  useImperativeHandle(ref, () => handle.current, []);
  function handleChange(event) {
    handle.current.validity.valueMissing = required === true && !event.currentTarget.checked && value.filter((v) => v !== event.currentTarget.value).length === 0;
    onChange(event);
  }
  return /* @__PURE__ */ jsxs("div", { children: [
    !hideLabel && /* @__PURE__ */ jsx(MainLabel, { children: label }),
    tableColumn.options.map((option) => /* @__PURE__ */ jsxs(StyledLabel, { htmlFor: option.id, children: [
      /* @__PURE__ */ jsx(CheckboxContainer, { children: /* @__PURE__ */ jsx(
        Checkbox,
        {
          ...restOfProps,
          "aria-label": label,
          onChange: handleChange,
          checked: value.includes(option.name),
          id: option.id,
          value: option.name
        }
      ) }),
      option.name
    ] }, option.id))
  ] });
});
export {
  MultipleSelectTableField_default as default
};
//# sourceMappingURL=index.js.map