import { Box, FieldSet, FormField, ToggleButton } from "@wix/design-system";
import { CircleSmallFilledSmall } from "@wix/wix-ui-icons-common";
import React from "react";
import { POSITION_TOGGLE_BUTTON } from "./data-hooks.js";
const PositionSelectorWithLabel = ({
  label,
  value,
  onChange,
  dataHook
}) => {
  return /* @__PURE__ */ React.createElement(Box, { direction: "vertical", dataHook }, /* @__PURE__ */ React.createElement(FormField, { inputWidth: "100%" }, /* @__PURE__ */ React.createElement(FieldSet, { columns: "auto 84px", alignment: "center", legend: label, legendPlacement: "left" }, /* @__PURE__ */ React.createElement("div", null), /* @__PURE__ */ React.createElement(PositionGrid, { value, onChange }))));
};
const PositionGrid = ({ value, onChange }) => {
  return /* @__PURE__ */ React.createElement(Box, { direction: "vertical", gap: "SP1" }, /* @__PURE__ */ React.createElement(Box, { direction: "horizontal", gap: "SP1" }, /* @__PURE__ */ React.createElement(PositionToggle, { currentSelection: value, value: "TOP_LEFT", onClick: onChange }), /* @__PURE__ */ React.createElement(PositionToggle, { currentSelection: value, value: "TOP", onClick: onChange }), /* @__PURE__ */ React.createElement(PositionToggle, { currentSelection: value, value: "TOP_RIGHT", onClick: onChange })), /* @__PURE__ */ React.createElement(Box, { direction: "horizontal", gap: "SP1" }, /* @__PURE__ */ React.createElement(PositionToggle, { currentSelection: value, value: "CENTER_LEFT", onClick: onChange }), /* @__PURE__ */ React.createElement(PositionToggle, { currentSelection: value, value: "CENTER", onClick: onChange }), /* @__PURE__ */ React.createElement(PositionToggle, { currentSelection: value, value: "CENTER_RIGHT", onClick: onChange })), /* @__PURE__ */ React.createElement(Box, { direction: "horizontal", gap: "SP1" }, /* @__PURE__ */ React.createElement(PositionToggle, { currentSelection: value, value: "BOTTOM_LEFT", onClick: onChange }), /* @__PURE__ */ React.createElement(PositionToggle, { currentSelection: value, value: "BOTTOM", onClick: onChange }), /* @__PURE__ */ React.createElement(PositionToggle, { currentSelection: value, value: "BOTTOM_RIGHT", onClick: onChange })));
};
const PositionToggle = ({ onClick, value, currentSelection }) => {
  return /* @__PURE__ */ React.createElement(
    ToggleButton,
    {
      skin: "inverted",
      selected: currentSelection === value,
      size: "tiny",
      onClick: () => onClick(value),
      tooltipProps: { disabled: true },
      border: true,
      dataHook: `${POSITION_TOGGLE_BUTTON}-${value}`
    },
    currentSelection === value ? /* @__PURE__ */ React.createElement(CircleSmallFilledSmall, null) : /* @__PURE__ */ React.createElement(Box, null)
  );
};
export {
  PositionSelectorWithLabel
};
//# sourceMappingURL=position-select-with-label.js.map
