/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
import { useMemo, useState } from '@wordpress/element';
import { useMergeRefs } from '@wordpress/compose';

/**
 * Internal dependencies
 */
import BorderBoxControlLinkedButton from '../border-box-control-linked-button';
import BorderBoxControlSplitControls from '../border-box-control-split-controls';
import { BorderControl } from '../../border-control';
import { StyledLabel } from '../../base-control/styles/base-control-styles';
import { View } from '../../view';
import { VisuallyHidden } from '../../visually-hidden';
import { contextConnect } from '../../context';
import { useBorderBoxControl } from './hook';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const BorderLabel = props => {
  const {
    label,
    hideLabelFromVision
  } = props;
  if (!label) {
    return null;
  }
  return hideLabelFromVision ? /*#__PURE__*/_jsx(VisuallyHidden, {
    as: "label",
    children: label
  }) : /*#__PURE__*/_jsx(StyledLabel, {
    children: label
  });
};
const UnconnectedBorderBoxControl = (props, forwardedRef) => {
  const {
    className,
    colors,
    disableCustomColors,
    disableUnits,
    enableAlpha,
    enableStyle,
    hasMixedBorders,
    hideLabelFromVision,
    isLinked,
    label,
    linkedControlClassName,
    linkedValue,
    onLinkedChange,
    onSplitChange,
    popoverPlacement,
    popoverOffset,
    size,
    splitValue,
    toggleLinked,
    wrapperClassName,
    __experimentalIsRenderedInSidebar,
    ...otherProps
  } = useBorderBoxControl(props);

  // Use internal state instead of a ref to make sure that the component
  // re-renders when the popover's anchor updates.
  const [popoverAnchor, setPopoverAnchor] = useState(null);

  // Memoize popoverProps to avoid returning a new object every time.
  const popoverProps = useMemo(() => popoverPlacement ? {
    placement: popoverPlacement,
    offset: popoverOffset,
    anchor: popoverAnchor,
    shift: true
  } : undefined, [popoverPlacement, popoverOffset, popoverAnchor]);
  const mergedRef = useMergeRefs([setPopoverAnchor, forwardedRef]);
  return /*#__PURE__*/_jsxs(View, {
    className: className,
    ...otherProps,
    ref: mergedRef,
    children: [/*#__PURE__*/_jsx(BorderLabel, {
      label: label,
      hideLabelFromVision: hideLabelFromVision
    }), /*#__PURE__*/_jsxs(View, {
      className: wrapperClassName,
      children: [isLinked ? /*#__PURE__*/_jsx(BorderControl, {
        className: linkedControlClassName,
        colors: colors,
        disableUnits: disableUnits,
        disableCustomColors: disableCustomColors,
        enableAlpha: enableAlpha,
        enableStyle: enableStyle,
        onChange: onLinkedChange,
        placeholder: hasMixedBorders ? __('Mixed') : undefined,
        __unstablePopoverProps: popoverProps,
        shouldSanitizeBorder: false // This component will handle that.
        ,
        value: linkedValue,
        withSlider: true,
        width: size === '__unstable-large' ? '116px' : '110px',
        __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
        __shouldNotWarnDeprecated36pxSize: true,
        size: size
      }) : /*#__PURE__*/_jsx(BorderBoxControlSplitControls, {
        colors: colors,
        disableCustomColors: disableCustomColors,
        enableAlpha: enableAlpha,
        enableStyle: enableStyle,
        onChange: onSplitChange,
        popoverPlacement: popoverPlacement,
        popoverOffset: popoverOffset,
        value: splitValue,
        __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
        size: size
      }), /*#__PURE__*/_jsx(BorderBoxControlLinkedButton, {
        onClick: toggleLinked,
        isLinked: isLinked,
        size: size
      })]
    })]
  });
};

/**
 * An input control for the color, style, and width of the border of a box. The
 * border can be customized as a whole, or individually for each side of the box.
 *
 * ```jsx
 * import { BorderBoxControl } from '@wordpress/components';
 * import { __ } from '@wordpress/i18n';
 *
 * const colors = [
 * 	{ name: 'Blue 20', color: '#72aee6' },
 * 	// ...
 * ];
 *
 * const MyBorderBoxControl = () => {
 * 	const defaultBorder = {
 * 		color: '#72aee6',
 * 		style: 'dashed',
 * 		width: '1px',
 * 	};
 * 	const [ borders, setBorders ] = useState( {
 * 		top: defaultBorder,
 * 		right: defaultBorder,
 * 		bottom: defaultBorder,
 * 		left: defaultBorder,
 * 	} );
 * 	const onChange = ( newBorders ) => setBorders( newBorders );
 *
 * 	return (
 * 		<BorderBoxControl
 * 			__next40pxDefaultSize
 * 			colors={ colors }
 * 			label={ __( 'Borders' ) }
 * 			onChange={ onChange }
 * 			value={ borders }
 * 		/>
 * 	);
 * };
 * ```
 */
export const BorderBoxControl = contextConnect(UnconnectedBorderBoxControl, 'BorderBoxControl');
export default BorderBoxControl;
//# sourceMappingURL=component.js.map