// packages/components/src/border-box-control/border-box-control-split-controls/component.tsx
import { __ } from "@wordpress/i18n";
import { useMemo, useState } from "@wordpress/element";
import { useMergeRefs } from "@wordpress/compose";
import BorderBoxControlVisualizer from "../border-box-control-visualizer/index.js";
import { BorderControl } from "../../border-control/index.js";
import { Grid } from "../../grid/index.js";
import { contextConnect } from "../../context/index.js";
import { useBorderBoxControlSplitControls } from "./hook.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var BorderBoxControlSplitControls = (props, forwardedRef) => {
  const {
    centeredClassName,
    colors,
    disableCustomColors,
    enableAlpha,
    enableStyle,
    onChange,
    popoverPlacement,
    popoverOffset,
    rightAlignedClassName,
    size = "default",
    value,
    __experimentalIsRenderedInSidebar,
    ...otherProps
  } = useBorderBoxControlSplitControls(props);
  const [popoverAnchor, setPopoverAnchor] = useState(null);
  const popoverProps = useMemo(() => popoverPlacement ? {
    placement: popoverPlacement,
    offset: popoverOffset,
    anchor: popoverAnchor,
    shift: true
  } : void 0, [popoverPlacement, popoverOffset, popoverAnchor]);
  const sharedBorderControlProps = {
    colors,
    disableCustomColors,
    enableAlpha,
    enableStyle,
    isCompact: true,
    __experimentalIsRenderedInSidebar,
    size,
    __shouldNotWarnDeprecated36pxSize: true
  };
  const mergedRef = useMergeRefs([setPopoverAnchor, forwardedRef]);
  return /* @__PURE__ */ _jsxs(Grid, {
    ...otherProps,
    ref: mergedRef,
    gap: 3,
    children: [/* @__PURE__ */ _jsx(BorderBoxControlVisualizer, {
      value,
      size
    }), /* @__PURE__ */ _jsx(BorderControl, {
      className: centeredClassName,
      hideLabelFromVision: true,
      label: __("Top border"),
      onChange: (newBorder) => onChange(newBorder, "top"),
      __unstablePopoverProps: popoverProps,
      value: value?.top,
      ...sharedBorderControlProps
    }), /* @__PURE__ */ _jsx(BorderControl, {
      hideLabelFromVision: true,
      label: __("Left border"),
      onChange: (newBorder) => onChange(newBorder, "left"),
      __unstablePopoverProps: popoverProps,
      value: value?.left,
      ...sharedBorderControlProps
    }), /* @__PURE__ */ _jsx(BorderControl, {
      className: rightAlignedClassName,
      hideLabelFromVision: true,
      label: __("Right border"),
      onChange: (newBorder) => onChange(newBorder, "right"),
      __unstablePopoverProps: popoverProps,
      value: value?.right,
      ...sharedBorderControlProps
    }), /* @__PURE__ */ _jsx(BorderControl, {
      className: centeredClassName,
      hideLabelFromVision: true,
      label: __("Bottom border"),
      onChange: (newBorder) => onChange(newBorder, "bottom"),
      __unstablePopoverProps: popoverProps,
      value: value?.bottom,
      ...sharedBorderControlProps
    })]
  });
};
var ConnectedBorderBoxControlSplitControls = contextConnect(BorderBoxControlSplitControls, "BorderBoxControlSplitControls");
var component_default = ConnectedBorderBoxControlSplitControls;
export {
  component_default as default
};
//# sourceMappingURL=component.js.map
