import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
import { Fragment } from "react";
import { icons } from "../../icons/icons.js";
import { BaseControl } from "../base-control/base-control.js";
import { ButtonGroup } from "../button/button.js";
import { SubMenuItem, MenuSeparator, MenuItem, Menu } from "../menu/menu.js";
import { RadioButtonGroup, RadioButton } from "../radio/radio.js";
import { RichLabel } from "../rich-label/rich-label.js";
import { ToggleButton } from "../toggle-button/toggle-button.js";
import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
/**
 * A component that allows the user to select an option from a list of options.
 *
 * @component
 * @param {Object} props - Component props.
 * @param {JSX.Element} [props.icon] - Icon to display in the label.
 * @param {string} props.label - Label to display.
 * @param {string} [props.subtitle] - Subtitle to display below the label.
 * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to show to the right of the label.
 * @param {string} [props.help] - Help text to show below the component.
 * @param {boolean} [props.inline] - If `true`, the component is displayed inline - icon/label/subtitle are on the left, the passed content is on the right. **Note:** not compatible with `actions`.
 * @param {string} props.value - The currently selected value.
 * @param {Function} props.onChange - Function to run when the selected value changes.
 * @param {{label: string, value: any, tooltip: string|JSX.Element, icon: JSX.Element|string, ariaLabel: string, subtitle:string|JSX.Element }[]} props.options - The list of options to choose from.
 * @param {string} [props.disabled] - If `true`, the option select component is disabled.
 * @param {boolean} [props.vertical] - If `true`, the options are displayed vertically. Not applicable to the `menu` type.
 * @param {OptionSelectType} [props.type='toggleButton'] - The type of the option select component.
 * @param {string} [props.className] - Classes to pass to the main element wrapper.
 * @param {string} [props.itemClassName] - Classes to pass to each item.
 * @param {Object} [props.wrapperProps] - Props to pass to the wrapper.
 * @param {Object} [props.itemProps] - Props to pass to each item.
 * @param {boolean} [props.noTriggerLabel] - Whether the trigger label should be hidden. Applies only to the `menu` type.
 * @param {boolean} [props.noTriggerIcon] - Whether the trigger icon should be hidden. Applies only to the `menu` type.
 * @param {string|boolean} [props.tooltip] - If provided, overrides the default tooltip text. If there is no label, the value will still be shown within the tooltip. Applies only to the `menu` type. If `true` is set and an `aria-label` is provided, the tooltip will show the same text as the `aria-label`.
 * @param {boolean} [props.noItemLabel] - Whether the option label should be hidden.
 * @param {boolean} [props.noItemIcon] - Whether the option icon should be hidden.
 * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
 *
 * @returns {JSX.Element} The OptionSelect component.
 *
 * @typedef {'toggleButtons' | 'toggleButtonsSplit' | 'radios' | 'radiosSegmented' | 'menu' | 'submenu' | 'standaloneMenuItems'} OptionSelectType
 *
 * @example
 * <OptionSelect
 * 	label='My component'
 * 	icon={icons.myIcon}
 * 	value={value}
 * 	onChange={setValue}
 * 	options={[
 * 		{ label: 'Option 1', value: 'option1' },
 * 		{ label: 'Option 2', value: 'option2' },
 * 	]}
 * />
 *
 * @preserve
 */
const OptionSelect = (props) => {
  const {
    icon,
    label,
    subtitle,
    actions,
    help,
    inline,
    value,
    onChange,
    options,
    disabled,
    vertical,
    type = "toggleButtons",
    className,
    itemClassName,
    wrapperProps,
    itemProps,
    noTriggerLabel,
    noTriggerIcon,
    tooltip: rawTooltip,
    noItemLabel,
    noItemIcon,
    children,
    hidden,
    "aria-label": ariaLabel,
    ...rest
  } = props;
  if (hidden) {
    return null;
  }
  let tooltip = rawTooltip;
  if (rawTooltip === true && ariaLabel?.length > 0) {
    tooltip = ariaLabel;
  }
  const currentItem = options?.find(({ value: optionValue }) => optionValue === value);
  const notSetLabel = /* @__PURE__ */ jsx("span", { className: "es:leading-3 es:opacity-50", children: __("Not set", "eightshift-ui-components") });
  let radioDesign = "default";
  if (type === "radiosSegmented") {
    radioDesign = "segmented";
  }
  if (type === "submenu") {
    return /* @__PURE__ */ jsxs(
      SubMenuItem,
      {
        trigger: /* @__PURE__ */ jsx(
          MenuItem,
          {
            icon: !noTriggerIcon && (icon ?? // eslint-disable-next-line no-nested-ternary
            (currentItem ? typeof currentItem?.icon === "string" ? icons?.[currentItem?.icon] : currentItem?.icon : (noTriggerLabel || noTriggerIcon) && notSetLabel)),
            children: /* @__PURE__ */ jsx(
              RichLabel,
              {
                label: noTriggerLabel ? null : label ?? currentItem?.label ?? notSetLabel,
                subtitle: subtitle === true ? currentItem?.label : subtitle,
                noColor: true
              }
            )
          }
        ),
        ...wrapperProps,
        children: [
          options.map(
            ({
              label: optionLabel,
              value: optionValue,
              icon: optionIcon,
              endIcon: optionEndIcon,
              ariaLabel: optionAriaLabel,
              subtitle: optionSubtitle,
              separator: optionHasSeparator,
              sectionTitle: optionSectionTitle,
              shortcut: optionShortcut,
              disabled: optionDisabled
            }) => /* @__PURE__ */ jsxs(Fragment, { children: [
              (optionHasSeparator === true || optionHasSeparator === "above") && /* @__PURE__ */ jsx(MenuSeparator, {}),
              optionSectionTitle && /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: optionSectionTitle }),
              /* @__PURE__ */ jsxs(
                MenuItem,
                {
                  selected: value === optionValue,
                  disabled: optionDisabled || disabled,
                  className: itemClassName,
                  icon: !noItemIcon && (typeof optionIcon === "string" ? icons?.[optionIcon] : optionIcon),
                  endIcon: !noItemIcon && (typeof optionEndIcon === "string" ? icons?.[optionEndIcon] : optionEndIcon),
                  "aria-label": optionAriaLabel ?? optionLabel,
                  onClick: () => onChange(optionValue),
                  shortcut: optionShortcut,
                  ...itemProps,
                  children: [
                    !noItemLabel && !optionSubtitle && optionLabel,
                    !noItemLabel && optionSubtitle && /* @__PURE__ */ jsx(
                      RichLabel,
                      {
                        label: optionLabel,
                        subtitle: optionSubtitle,
                        noColor: true
                      }
                    )
                  ]
                }
              ),
              optionHasSeparator === "below" && /* @__PURE__ */ jsx(MenuSeparator, {})
            ] }, optionValue)
          ),
          children
        ]
      }
    );
  }
  if (type === "standaloneMenuItems") {
    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
      options.map(
        ({
          label: optionLabel,
          value: optionValue,
          icon: optionIcon,
          endIcon: optionEndIcon,
          ariaLabel: optionAriaLabel,
          subtitle: optionSubtitle,
          separator: optionHasSeparator,
          sectionTitle: optionSectionTitle,
          shortcut: optionShortcut,
          disabled: optionDisabled
        }) => /* @__PURE__ */ jsxs(Fragment, { children: [
          (optionHasSeparator === true || optionHasSeparator === "above") && /* @__PURE__ */ jsx(MenuSeparator, {}),
          optionSectionTitle && /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: optionSectionTitle }),
          /* @__PURE__ */ jsxs(
            MenuItem,
            {
              selected: value === optionValue,
              disabled: optionDisabled || disabled,
              className: itemClassName,
              icon: !noItemIcon && (typeof optionIcon === "string" ? icons?.[optionIcon] : optionIcon),
              endIcon: !noItemIcon && (typeof optionEndIcon === "string" ? icons?.[optionEndIcon] : optionEndIcon),
              "aria-label": optionAriaLabel ?? optionLabel,
              onClick: () => onChange(optionValue),
              shortcut: optionShortcut,
              ...itemProps,
              children: [
                !noItemLabel && !optionSubtitle && optionLabel,
                !noItemLabel && optionSubtitle && /* @__PURE__ */ jsx(
                  RichLabel,
                  {
                    label: optionLabel,
                    subtitle: optionSubtitle,
                    noColor: true
                  }
                )
              ]
            }
          ),
          optionHasSeparator === "below" && /* @__PURE__ */ jsx(MenuSeparator, {})
        ] }, optionValue)
      ),
      children
    ] });
  }
  return /* @__PURE__ */ jsxs(
    BaseControl,
    {
      icon,
      label,
      subtitle,
      actions,
      help,
      inline,
      className,
      ...rest,
      children: [
        ["toggleButtons", "toggleButtonsSplit"].includes(type) && /* @__PURE__ */ jsx(
          ButtonGroup,
          {
            vertical,
            "aria-label": typeof label !== "undefined" ? null : ariaLabel,
            type: type === "toggleButtonsSplit" ? "split" : "segmented",
            ...wrapperProps,
            children: options.map(
              ({
                label: optionLabel,
                value: optionValue,
                icon: optionIcon,
                tooltip: optionTooltip,
                ariaLabel: optionAriaLabel,
                subtitle: optionSubtitle,
                disabled: optionDisabled
              }) => /* @__PURE__ */ jsxs(
                ToggleButton,
                {
                  selected: optionValue === value,
                  onChange: () => onChange(optionValue),
                  disabled: optionDisabled || disabled,
                  className: itemClassName,
                  icon: !noItemIcon && (typeof optionIcon === "string" ? icons?.[optionIcon] : optionIcon),
                  tooltip: optionTooltip ?? optionAriaLabel ?? (noItemLabel && optionLabel),
                  "aria-label": optionAriaLabel ?? optionLabel ?? optionTooltip,
                  ...itemProps,
                  children: [
                    !noItemLabel && !optionSubtitle && optionLabel,
                    !noItemLabel && optionSubtitle && /* @__PURE__ */ jsx(
                      RichLabel,
                      {
                        label: optionLabel,
                        subtitle: optionSubtitle,
                        noColor: true
                      }
                    )
                  ]
                },
                optionValue
              )
            )
          }
        ),
        (type === "radios" || type === "radiosSegmented") && /* @__PURE__ */ jsx(
          RadioButtonGroup,
          {
            orientation: vertical ? "vertical" : "horizontal",
            onChange: (v) => onChange(v),
            design: radioDesign,
            "aria-label": typeof label !== "undefined" ? null : ariaLabel,
            value,
            ...wrapperProps,
            children: options.map(({ label: optionLabel, value: optionValue, icon: optionIcon, ariaLabel: optionAriaLabel, subtitle: optionSubtitle, disabled: optionDisabled }) => /* @__PURE__ */ jsx(
              RadioButton,
              {
                value: optionValue,
                disabled: optionDisabled || disabled,
                className: itemClassName,
                subtitle: !noItemLabel && optionSubtitle,
                icon: !noItemIcon && (typeof optionIcon === "string" ? icons?.[optionIcon] : optionIcon),
                "aria-label": optionAriaLabel ?? optionLabel,
                label: !noItemLabel && optionLabel,
                ...itemProps
              },
              optionValue
            ))
          }
        ),
        type === "menu" && /* @__PURE__ */ jsxs(
          Menu,
          {
            triggerLabel: noTriggerLabel ? null : currentItem?.label ?? notSetLabel,
            triggerIcon: !noTriggerIcon && // eslint-disable-next-line no-nested-ternary
            (currentItem ? typeof currentItem?.icon === "string" ? icons?.[currentItem?.icon] : currentItem?.icon : (noTriggerLabel || noTriggerIcon) && notSetLabel),
            tooltip: noTriggerLabel ? /* @__PURE__ */ jsx(
              RichLabel,
              {
                label: tooltip ? tooltip : currentItem?.tooltip ?? currentItem?.label,
                subtitle: tooltip && (currentItem?.tooltip ?? currentItem?.label),
                noColor: true
              }
            ) : tooltip,
            triggerProps: {
              ...wrapperProps?.triggerProps,
              "aria-label": typeof label !== "undefined" ? null : ariaLabel ?? label ?? tooltip
            },
            keepOpen: true,
            "aria-label": ariaLabel ?? label ?? tooltip ?? __("Menu", "eightshift-ui-components"),
            ...wrapperProps,
            children: [
              options.map(
                ({
                  label: optionLabel,
                  value: optionValue,
                  icon: optionIcon,
                  endIcon: optionEndIcon,
                  ariaLabel: optionAriaLabel,
                  subtitle: optionSubtitle,
                  separator: optionHasSeparator,
                  sectionTitle: optionSectionTitle,
                  shortcut: optionShortcut,
                  disabled: optionDisabled
                }) => /* @__PURE__ */ jsxs(Fragment, { children: [
                  (optionHasSeparator === true || optionHasSeparator === "above") && /* @__PURE__ */ jsx(MenuSeparator, {}),
                  optionSectionTitle && /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: optionSectionTitle }),
                  /* @__PURE__ */ jsxs(
                    MenuItem,
                    {
                      selected: value === optionValue,
                      disabled: optionDisabled || disabled,
                      className: itemClassName,
                      icon: !noItemIcon && (typeof optionIcon === "string" ? icons?.[optionIcon] : optionIcon),
                      endIcon: !noItemIcon && (typeof optionEndIcon === "string" ? icons?.[optionEndIcon] : optionEndIcon),
                      "aria-label": optionAriaLabel ?? optionLabel,
                      onClick: () => onChange(optionValue),
                      shortcut: optionShortcut,
                      ...itemProps,
                      children: [
                        !noItemLabel && !optionSubtitle && optionLabel,
                        !noItemLabel && optionSubtitle && /* @__PURE__ */ jsx(
                          RichLabel,
                          {
                            label: optionLabel,
                            subtitle: optionSubtitle,
                            noColor: true
                          }
                        )
                      ]
                    }
                  ),
                  optionHasSeparator === "below" && /* @__PURE__ */ jsx(MenuSeparator, {})
                ] }, optionValue)
              ),
              children
            ]
          }
        )
      ]
    }
  );
};
export {
  OptionSelect
};
