import { j as jsxRuntimeExports } from "../../../../../../../_virtual/jsx-runtime.js";
import { useSectionByBrickId, useParentBrick } from "../../../../../../../use-page-data.js";
import EnumField from "./enum.js";
function AlignSelfField(props) {
  const { brickId, onChange, schema } = props;
  const section = useSectionByBrickId(brickId);
  const parentBrick = useParentBrick(brickId);
  const parentElement = parentBrick ?? section;
  if (!parentElement) {
    return null;
  }
  const htmlElement = document.getElementById(parentElement.id);
  if (!htmlElement) {
    return null;
  }
  const parentFlexOrientation = getComputedStyle(htmlElement).flexDirection;
  const customSchema = {
    ...schema,
    title: parentFlexOrientation === "column" ? "Horizontal position" : "Vertical position",
    description: parentFlexOrientation === "column" ? "Horizontal position of the brick within its parent box or section." : "Vertical position of the brick within its parent box or section.",
    "ui:display": "icon-group",
    enumNames: parentFlexOrientation === "column" ? ["Auto", "Left", "Center", "Right", "Stretch"] : ["Auto", "Top", "Center", "Bottom", "Stretch"],
    "ui:icons": parentFlexOrientation === "column" ? [
      null,
      "fluent:align-start-horizontal-20-regular",
      "fluent:center-horizontal-20-regular",
      "fluent:align-end-horizontal-20-regular",
      "fluent:auto-fit-width-20-regular"
    ] : [
      null,
      "fluent:align-start-vertical-20-regular",
      "fluent:center-vertical-20-regular",
      "fluent:align-end-vertical-20-regular",
      "fluent:auto-fit-height-20-regular"
    ]
  };
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
    EnumField,
    {
      ...props,
      schema: customSchema,
      title: customSchema.title,
      description: customSchema.description,
      onChange
    }
  );
}
export {
  AlignSelfField as default
};
//# sourceMappingURL=align-self.js.map
