// packages/components/src/border-control/border-control-dropdown/component.tsx
import { __, sprintf } from "@wordpress/i18n";
import BorderControlStylePicker from "../border-control-style-picker/index.js";
import Button from "../../button/index.js";
import ColorIndicator from "../../color-indicator/index.js";
import ColorPalette from "../../color-palette/index.js";
import Dropdown from "../../dropdown/index.js";
import { VStack } from "../../v-stack/index.js";
import { contextConnect } from "../../context/index.js";
import { useBorderControlDropdown } from "./hook.js";
import DropdownContentWrapper from "../../dropdown/dropdown-content-wrapper.js";
import { isMultiplePaletteArray } from "../../color-palette/utils.js";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
var getAriaLabelColorValue = (colorValue) => {
  return colorValue.replace(/^var\((.+)\)$/, "$1");
};
var getColorObject = (colorValue, colors) => {
  if (!colorValue || !colors) {
    return;
  }
  if (isMultiplePaletteArray(colors)) {
    let matchedColor;
    colors.some((origin) => origin.colors.some((color) => {
      if (color.color === colorValue) {
        matchedColor = color;
        return true;
      }
      return false;
    }));
    return matchedColor;
  }
  return colors.find((color) => color.color === colorValue);
};
var getToggleAriaLabel = (colorValue, colorObject, style, isStyleEnabled) => {
  if (isStyleEnabled) {
    if (colorObject) {
      const ariaLabelValue = getAriaLabelColorValue(colorObject.color);
      return style ? sprintf(
        // translators: 1: The name of the color e.g. "vivid red". 2: The color's hex code e.g.: "#f00:". 3: The current border style selection e.g. "solid".
        __('Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".'),
        colorObject.name,
        ariaLabelValue,
        style
      ) : sprintf(
        // translators: 1: The name of the color e.g. "vivid red". 2: The color's hex code e.g.: "#f00:".
        __('Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".'),
        colorObject.name,
        ariaLabelValue
      );
    }
    if (colorValue) {
      const ariaLabelValue = getAriaLabelColorValue(colorValue);
      return style ? sprintf(
        // translators: 1: The color's hex code e.g.: "#f00:". 2: The current border style selection e.g. "solid".
        __('Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".'),
        ariaLabelValue,
        style
      ) : sprintf(
        // translators: %s: The color's hex code e.g: "#f00".
        __('Border color and style picker. The currently selected color has a value of "%s".'),
        ariaLabelValue
      );
    }
    return __("Border color and style picker.");
  }
  if (colorObject) {
    return sprintf(
      // translators: 1: The name of the color e.g. "vivid red". 2: The color's hex code e.g: "#f00".
      __('Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'),
      colorObject.name,
      getAriaLabelColorValue(colorObject.color)
    );
  }
  if (colorValue) {
    return sprintf(
      // translators: %s: The color's hex code e.g: "#f00".
      __('Border color picker. The currently selected color has a value of "%s".'),
      getAriaLabelColorValue(colorValue)
    );
  }
  return __("Border color picker.");
};
var BorderControlDropdown = (props, forwardedRef) => {
  const {
    __experimentalIsRenderedInSidebar,
    border,
    colors,
    disableCustomColors,
    enableAlpha,
    enableStyle,
    indicatorClassName,
    indicatorWrapperClassName,
    isStyleSettable,
    onReset,
    onColorChange,
    onStyleChange,
    popoverContentClassName,
    popoverControlsClassName,
    resetButtonWrapperClassName,
    size,
    __unstablePopoverProps,
    ...otherProps
  } = useBorderControlDropdown(props);
  const {
    color,
    style
  } = border || {};
  const colorObject = getColorObject(color, colors);
  const toggleAriaLabel = getToggleAriaLabel(color, colorObject, style, enableStyle);
  const enableResetButton = color || style && style !== "none";
  const dropdownPosition = __experimentalIsRenderedInSidebar ? "bottom left" : void 0;
  const renderToggle = ({
    onToggle
  }) => /* @__PURE__ */ _jsx(Button, {
    onClick: onToggle,
    variant: "tertiary",
    "aria-label": toggleAriaLabel,
    tooltipPosition: dropdownPosition,
    label: __("Border color and style picker"),
    showTooltip: true,
    __next40pxDefaultSize: size === "__unstable-large",
    children: /* @__PURE__ */ _jsx("span", {
      className: indicatorWrapperClassName,
      children: /* @__PURE__ */ _jsx(ColorIndicator, {
        className: indicatorClassName,
        colorValue: color
      })
    })
  });
  const renderContent = () => /* @__PURE__ */ _jsx(_Fragment, {
    children: /* @__PURE__ */ _jsxs(DropdownContentWrapper, {
      paddingSize: "medium",
      children: [/* @__PURE__ */ _jsxs(VStack, {
        className: popoverControlsClassName,
        spacing: 6,
        children: [/* @__PURE__ */ _jsx(ColorPalette, {
          className: popoverContentClassName,
          value: color,
          onChange: onColorChange,
          colors,
          disableCustomColors,
          __experimentalIsRenderedInSidebar,
          clearable: false,
          enableAlpha
        }), enableStyle && isStyleSettable && /* @__PURE__ */ _jsx(BorderControlStylePicker, {
          label: __("Style"),
          value: style,
          onChange: onStyleChange
        })]
      }), /* @__PURE__ */ _jsx("div", {
        className: resetButtonWrapperClassName,
        children: /* @__PURE__ */ _jsx(Button, {
          variant: "tertiary",
          onClick: () => {
            onReset();
          },
          disabled: !enableResetButton,
          accessibleWhenDisabled: true,
          __next40pxDefaultSize: true,
          children: __("Reset")
        })
      })]
    })
  });
  return /* @__PURE__ */ _jsx(Dropdown, {
    renderToggle,
    renderContent,
    popoverProps: {
      ...__unstablePopoverProps
    },
    ...otherProps,
    ref: forwardedRef
  });
};
var ConnectedBorderControlDropdown = contextConnect(BorderControlDropdown, "BorderControlDropdown");
var component_default = ConnectedBorderControlDropdown;
export {
  component_default as default
};
//# sourceMappingURL=component.js.map
