import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
import { Menu, MenuItem, MenuSeparator, MenuSection } from "../menu/menu.js";
import { ColorSwatch } from "./color-swatch.js";
import { RichLabel } from "../rich-label/rich-label.js";
import { BaseControl } from "../base-control/base-control.js";
import { c as clsx } from "../../lite-DVmmD_-j.js";
import { icons } from "../../icons/icons.js";
/**
 * Color picker.
 *
 * @component
 * @param {Object} props - Component props.
 * @param {string} [props.icon] - Icon to display.
 * @param {string} [props.label] - Label to display.
 * @param {string} [props.subtitle] - Subtitle to display.
 * @param {string} [props.labelClassName] - Additional clsx passed to the label.
 * @param {string} props.value - Selected value.
 * @param {Function} props.onChange - Function to run when the value changes.
 * @param {Object[]} props.colors - Colors to display.
 * @param {string} props.colors[].name - Color name.
 * @param {string} props.colors[].slug - Color slug.
 * @param {string} props.colors[].color - Color value (HEX, RGB, HSL, HSB).
 * @param {boolean} [props.showColorCode] - If `true`, the HEX color code is shown below the color name.
 * @param {boolean} [props.noColorGroups] - If `true`, colors won't be grouped by shades.
 * @param {ColorPickerType} props.type - Type of the color picker. Affects the icon and tooltip.
 * @param {boolean} [props.clearable] - If `true`, the picked color can be removed.
 * @param {boolean} [props.stacked] - If `true`, the control is not rendered inline.
 * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
 * @param {string} [props.tooltip] - If provided, overrides the default tooltip text. If there is no label, the value will still be shown within the tooltip.
 * @param {string} [props.clearItemLabel] - Label for the "None" item, if `clearable` is enabled.
 * @param {JSX.Element|JSX.Element[]} [props.extraOptions] - If `type` is `menu`, allows passing additional menu items, which will be displayed below the options.
 *
 * @returns {JSX.Element} The ColorPicker component.
 *
 * @typedef {'default' | 'fillColor' | 'textColor' | 'textHighlightColor' | 'listMarkerColor'} ColorPickerType
 *
 * @example
 * <ColorPicker
 * 	icon={icons.fillColor}
 * 	label={__('Fill color', 'eightshift-ui-components')}
 * 	subtitle={__('Select fill color', 'eightshift-ui-components')}
 * 	value={fillColor}
 * 	onChange={(value) => setAttributes({ fillColor: value })}
 * 	colors={[
 * 		{ name: 'Red', slug: 'red', color: '#ff0000' },
 * 		{ name: 'Green', slug: 'green', color: '#00ff00' },
 * 		{ name: 'Blue', slug: 'blue', color: '#0000ff' },
 * 	]}
 * />
 *
 * @preserve
 */
const ColorPicker = (props) => {
  const {
    icon,
    label,
    subtitle,
    labelClassName,
    value,
    onChange,
    colors,
    showColorCode,
    noColorGroups,
    type = "default",
    stacked,
    clearable,
    clearItemLabel = __("None", "eightshift-ui-components"),
    hidden,
    tooltip,
    extraOptions,
    ...rest
  } = props;
  if (hidden) {
    return null;
  }
  const currentColor = colors?.find(({ slug }) => slug === value)?.color;
  const colorSuffixRegex = /(?!^.+)(-?(?:50|100|200|300|400|500|600|700|800|900|950|10|20|30|40|50|60|70|80|90){1})$/gi;
  const hasColorGroups = !noColorGroups && colors?.some(({ slug }) => colorSuffixRegex.test(slug));
  let groupedColors;
  const colorGroupNames = {
    generic: __("Other colors", "eightshift-ui-components")
  };
  if (hasColorGroups) {
    groupedColors = colors.reduce(
      (output, current) => {
        if (current === void 0 || current?.name === void 0 || current?.slug === void 0) {
          return output;
        }
        if (current.slug.match(colorSuffixRegex)?.length) {
          const newSlug = current.slug.replace(colorSuffixRegex, "").trim();
          if (!output[newSlug]) {
            output[newSlug] = [];
            colorGroupNames[newSlug] = current.name.replace(colorSuffixRegex, "").trim();
          }
          output[newSlug] = [
            ...output[newSlug],
            {
              ...current,
              shade: current.slug.match(colorSuffixRegex)[0].replace("-", "")
            }
          ];
        } else {
          output.generic = [...output.generic, current];
        }
        return output;
      },
      { generic: [] }
    );
  }
  const SingleItem = ({ name, slug, color, ...rest2 }) => /* @__PURE__ */ jsxs(
    MenuItem,
    {
      ...rest2,
      endIcon: /* @__PURE__ */ jsx(
        ColorSwatch,
        {
          className: "es:size-5!",
          color
        }
      ),
      onClick: () => onChange(slug),
      selected: value === slug,
      children: [
        !showColorCode && name.replaceAll("-", " "),
        showColorCode && /* @__PURE__ */ jsx(
          RichLabel,
          {
            label: name.replaceAll("-", " "),
            subtitle: color.toUpperCase(),
            subtitleClassName: "es:font-mono"
          }
        )
      ]
    }
  );
  let tooltipText;
  let menuTriggerIcon;
  if (type === "default") {
    tooltipText = __("Color", "eightshift-ui-components");
  } else if (type === "fillColor") {
    tooltipText = __("Fill color", "eightshift-ui-components");
    menuTriggerIcon = icons.colorPickerFill;
  } else if (type === "textColor") {
    tooltipText = __("Text color", "eightshift-ui-components");
    menuTriggerIcon = icons.colorPickerText;
  } else if (type === "textHighlightColor") {
    tooltipText = __("Text highlight color", "eightshift-ui-components");
    menuTriggerIcon = icons.colorPickerTextHighlight;
  } else if (type === "listMarkerColor") {
    tooltipText = __("List marker color", "eightshift-ui-components");
    menuTriggerIcon = icons.colorPickerListMarker;
  }
  const currentColorName = colors?.find((color) => color?.slug === value)?.name;
  if (!label && tooltipText) {
    tooltipText = /* @__PURE__ */ jsx(
      RichLabel,
      {
        label: tooltipText,
        subtitle: currentColorName,
        noColor: true
      }
    );
  } else if (!label && tooltip) {
    tooltipText = /* @__PURE__ */ jsx(
      RichLabel,
      {
        label: tooltip,
        subtitle: currentColorName,
        noColor: true
      }
    );
  } else if (label) {
    tooltipText = currentColorName;
  }
  return /* @__PURE__ */ jsx(
    BaseControl,
    {
      icon,
      label,
      subtitle,
      className: clsx("es:w-full", labelClassName),
      inline: !stacked,
      children: /* @__PURE__ */ jsxs(
        Menu,
        {
          triggerIcon: /* @__PURE__ */ jsxs(Fragment, { children: [
            (type === "default" || icon) && /* @__PURE__ */ jsx(
              ColorSwatch,
              {
                color: currentColor,
                className: "es:size-6! es:shadow-none!"
              }
            ),
            !icon && type !== "default" && /* @__PURE__ */ jsxs("div", { className: "es:relative es:size-6 es:icon:absolute es:icon:inset-0 es:icon:size-full", children: [
              menuTriggerIcon,
              /* @__PURE__ */ jsx(
                ColorSwatch,
                {
                  color: currentColor,
                  className: "es:absolute es:-bottom-0.5 es:left-0 es:h-2! es:shadow-none!"
                }
              )
            ] })
          ] }),
          keepOpen: true,
          tooltip: tooltipText,
          triggerProps: {
            ...rest.triggerProps,
            "aria-label": typeof label !== "undefined" ? null : props?.["aria-label"]
          },
          ...rest,
          children: [
            clearable && /* @__PURE__ */ jsxs(Fragment, { children: [
              /* @__PURE__ */ jsx(
                MenuItem,
                {
                  onClick: () => onChange(void 0),
                  selected: typeof value === "undefined",
                  endIcon: /* @__PURE__ */ jsx(ColorSwatch, { className: "es:size-5!" }),
                  children: clearItemLabel
                }
              ),
              /* @__PURE__ */ jsx(MenuSeparator, {})
            ] }),
            (noColorGroups || !hasColorGroups) && colors.map((color) => /* @__PURE__ */ jsx(
              SingleItem,
              {
                ...color
              },
              color.slug
            )),
            hasColorGroups && /* @__PURE__ */ jsxs(Fragment, { children: [
              Object.entries(groupedColors).map(([groupSlug, colors2]) => {
                if (groupSlug === "generic") {
                  return null;
                }
                return /* @__PURE__ */ jsx(
                  MenuSection,
                  {
                    "aria-label": colorGroupNames[groupSlug],
                    children: colors2.map((color) => /* @__PURE__ */ jsx(
                      SingleItem,
                      {
                        ...color
                      },
                      color.slug
                    ))
                  },
                  groupSlug
                );
              }),
              groupedColors.generic.length > 0 && /* @__PURE__ */ jsx(MenuSection, { "aria-label": colorGroupNames.generic, children: groupedColors.generic.map((color) => /* @__PURE__ */ jsx(
                SingleItem,
                {
                  ...color
                },
                color.slug
              )) })
            ] }),
            extraOptions && /* @__PURE__ */ jsx(MenuSeparator, {}),
            extraOptions
          ]
        }
      )
    }
  );
};
export {
  ColorPicker
};
