"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useBorderBoxControl = useBorderBoxControl;
var _element = require("@wordpress/element");
var styles = _interopRequireWildcard(require("../styles"));
var _utils = require("../utils");
var _context = require("../../context");
var _useCx = require("../../utils/hooks/use-cx");
var _deprecated36pxSize = require("../../utils/deprecated-36px-size");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function useBorderBoxControl(props) {
  const {
    className,
    colors = [],
    onChange,
    enableAlpha = false,
    enableStyle = true,
    size = 'default',
    value,
    __experimentalIsRenderedInSidebar = false,
    __next40pxDefaultSize,
    ...otherProps
  } = (0, _context.useContextSystem)(props, 'BorderBoxControl');
  (0, _deprecated36pxSize.maybeWarnDeprecated36pxSize)({
    componentName: 'BorderBoxControl',
    __next40pxDefaultSize,
    size
  });
  const computedSize = size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
  const mixedBorders = (0, _utils.hasMixedBorders)(value);
  const splitBorders = (0, _utils.hasSplitBorders)(value);
  const linkedValue = splitBorders ? (0, _utils.getCommonBorder)(value) : value;
  const splitValue = splitBorders ? value : (0, _utils.getSplitBorders)(value);

  // If no numeric width value is set, the unit select will be disabled.
  const hasWidthValue = !isNaN(parseFloat(`${linkedValue?.width}`));
  const [isLinked, setIsLinked] = (0, _element.useState)(!mixedBorders);
  const toggleLinked = () => setIsLinked(!isLinked);
  const onLinkedChange = newBorder => {
    if (!newBorder) {
      return onChange(undefined);
    }

    // If we have all props defined on the new border apply it.
    if (!mixedBorders || (0, _utils.isCompleteBorder)(newBorder)) {
      return onChange((0, _utils.isEmptyBorder)(newBorder) ? undefined : newBorder);
    }

    // If we had mixed borders we might have had some shared border props
    // that we need to maintain. For example; we could have mixed borders
    // with all the same color but different widths. Then from the linked
    // control we change the color. We should keep the separate  widths.
    const changes = (0, _utils.getBorderDiff)(linkedValue, newBorder);
    const updatedBorders = {
      top: {
        ...value?.top,
        ...changes
      },
      right: {
        ...value?.right,
        ...changes
      },
      bottom: {
        ...value?.bottom,
        ...changes
      },
      left: {
        ...value?.left,
        ...changes
      }
    };
    if ((0, _utils.hasMixedBorders)(updatedBorders)) {
      return onChange(updatedBorders);
    }
    const filteredResult = (0, _utils.isEmptyBorder)(updatedBorders.top) ? undefined : updatedBorders.top;
    onChange(filteredResult);
  };
  const onSplitChange = (newBorder, side) => {
    const updatedBorders = {
      ...splitValue,
      [side]: newBorder
    };
    if ((0, _utils.hasMixedBorders)(updatedBorders)) {
      onChange(updatedBorders);
    } else {
      onChange(newBorder);
    }
  };
  const cx = (0, _useCx.useCx)();
  const classes = (0, _element.useMemo)(() => {
    return cx(styles.borderBoxControl, className);
  }, [cx, className]);
  const linkedControlClassName = (0, _element.useMemo)(() => {
    return cx(styles.linkedBorderControl());
  }, [cx]);
  const wrapperClassName = (0, _element.useMemo)(() => {
    return cx(styles.wrapper);
  }, [cx]);
  return {
    ...otherProps,
    className: classes,
    colors,
    disableUnits: mixedBorders && !hasWidthValue,
    enableAlpha,
    enableStyle,
    hasMixedBorders: mixedBorders,
    isLinked,
    linkedControlClassName,
    onLinkedChange,
    onSplitChange,
    toggleLinked,
    linkedValue,
    size: computedSize,
    splitValue,
    wrapperClassName,
    __experimentalIsRenderedInSidebar
  };
}
//# sourceMappingURL=hook.js.map