import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { _ as __ } from "../../../default-i18n-CN_q3KUs.js";
import { BaseControl } from "../../base-control/base-control.js";
import { $ as $d2f53cda644affe3$export$2f2b9559550c7bbc, a as $440f4836bcb56932$export$b94867ecbd698f21 } from "../../../SearchField-jVsbJe1O.js";
import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../../Button-npzfSoYo.js";
import { g as $de32f1b87079253c$export$2e1e1122cf0cba88, e as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../../Dialog-CQ8H6Noi.js";
import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../../Input-ChJaTNa5.js";
import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../../Label-DWVaNd2E.js";
import { $ as $eed445e0843c11d0$export$41f133550aa26f48, a as $eed445e0843c11d0$export$a11e76429ed99b4, b as $612b8eb6cb90e02d$export$62ed72bc21f6b8a6 } from "../../../ListBox-D0Stb4wr.js";
import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../../Text-AxKZjtFm.js";
import { $ as $d8f176866e6dc039$export$2cfc5be7a55829f6 } from "../../../useDragAndDrop-DVLrIdEn.js";
import { useRef, cloneElement } from "react";
import { icons } from "../../../icons/icons.js";
import "../../../react-jsx-parser.min-LF707GK8.js";
import { OptionItemBase } from "./shared.js";
import { RichLabel } from "../../rich-label/rich-label.js";
import { c as clsx } from "../../../utils-cvK1vxO7.js";
import { getValue, moveArrayItem } from "../shared.js";
import { truncateEnd } from "../../../utilities/text-helpers.js";
import { $ as $bb77f239b46e8c72$export$3274cf84b703fff } from "../../../useFilter-C4wo8Iii.js";
/**
 * Multi-select menu.
 *
 * @component
 * @param {Object} props - Component props.
 * @param {string} [props.icon] - Icon of the component.
 * @param {string} [props.help] - Help text of the component.
 * @param {string} [props.label] - Label of the component.
 * @param {boolean} [props.inline] - Whether the Select menu is displayed inline with the label, to the right.
 * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to show to the right of the label.
 * @param {string} [props.subtitle] - Subtitle of the component.
 * @param {{label: string, value: string, metadata: Object<string, any>?}[]} props.options - Options to display in the select. `[{ label: string, value: string }]`.
 * @param {string|{label: string, value: string, metadata: Object<string, any>?}} props.value - Current value of the select.
 * @param {Function} props.onChange - Function to call when the value changes.
 * @param {boolean} [props.simpleValue=false] - If `true`, instead of using a `{label: '', value: ''}` value type, a string is used (just the value).
 * @param {boolean} [props.clearable] - Whether the select is clearable.
 * @param {boolean} [props.disabled] - Whether the select is disabled.
 * @param {string} [props.placeholder] - Placeholder text to show when no value is selected.
 * @param {JSX.Element} [props.customMenuOption] - If provided, replaces the default item in the dropdown menu (react-select's `components.Option`).
 * @param {JSX.Element} [props.customValueDisplay] - If provided, replaces the default current value display of each selected item (react-select's `components.MultiValue`).
 * @param {JSX.Element} [props.customDropdownArrow] - If provided, replaces the default dropdown arrow indicator.
 * @param {string} [props.className] - Classes to pass to the select menu.
 * @param {boolean} [props.noMinWidth=false] - If `true`, the select menu will not have a minimum width.
 * @param {boolean} [props.searchable] - If `true`, the menu will allow searching through the options.
 * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
 *
 * @returns {JSX.Element} The SelectNext component.
 *
 * @example
 * const [value, setValue] = useState(null);
 *
 * const options = [
 * 	{ label: 'Option 1', value: 'option-1' },
 * 	{ label: 'Option 2', value: 'option-2' },
 * 	{ label: 'Option 3', value: 'option-3' },
 * ];
 *
 * <__MultiSelectNext
 * 	label='Select items'
 * 	options={loadOptions}
 * 	value={value}
 * 	onChange={setValue}
 * />
 *
 * @preserve
 */
const __MultiSelectNext = (props) => {
  const {
    icon,
    help,
    label,
    inline,
    actions,
    subtitle,
    value,
    onChange,
    options,
    simpleValue = false,
    disabled = false,
    clearable = false,
    placeholder = __("Select...", "eightshift-ui-components"),
    customMenuOption,
    customValueDisplay,
    customDropdownArrow,
    className,
    noMinWidth = false,
    searchable,
    hidden,
    ...rest
  } = props;
  const ref = useRef();
  const { contains } = $bb77f239b46e8c72$export$3274cf84b703fff({ sensitivity: "base" });
  const currentValue = getValue(simpleValue, value, options);
  const handleSelectionChange = (selected) => {
    if (selected === null || selected === void 0) {
      onChange(null);
      return;
    }
    if (selected.size === 0) {
      onChange(simpleValue ? "" : []);
      return;
    }
    if (simpleValue) {
      onChange([...selected]);
      return;
    }
    const selectedValues = [...selected]?.map((item) => {
      const option = options.find((option2) => option2.value === item);
      if (!option) {
        return null;
      }
      return {
        ...option
      };
    })?.filter(Boolean);
    onChange(selectedValues);
  };
  const selectedItems = new Set(currentValue?.map((item) => item?.value ?? item ?? null).filter(Boolean));
  let { dragAndDropHooks } = $d8f176866e6dc039$export$2cfc5be7a55829f6({
    getItems: (keys) => [...keys].map((key) => ({ "text/plain": key, text: currentValue.find((item) => item.value === key)?.label ?? key })),
    onReorder(e) {
      handleSelectionChange(new Set(moveArrayItem(selectedItems, [...e.keys][0], e.target.key, e.target.dropPosition)));
    },
    renderDragPreview(items) {
      return /* @__PURE__ */ jsxs("div", { className: "es:bg-accent-700 es:rounded-md es:px-1.5 es:py-0.5 es:text-white es:translate-x-7 es:translate-y-6", children: [
        truncateEnd(items[0]["text"], 20),
        items.length > 1 && /* @__PURE__ */ jsx("span", { className: "badge", children: items.length })
      ] });
    },
    renderDropIndicator(target) {
      return /* @__PURE__ */ jsx(
        $612b8eb6cb90e02d$export$62ed72bc21f6b8a6,
        {
          target,
          className: "es:w-0.75 es:h-5.5 es:rounded-md es:transition es:inset-ring-0 es:drop-target:bg-accent-600 es:bg-accent-700/30 es:any-focus:outline-hidden es:any-focus:inset-ring-0"
        }
      );
    },
    isDisabled: disabled || selectedItems.size < 2
  });
  if (hidden) {
    return null;
  }
  return /* @__PURE__ */ jsx(
    BaseControl,
    {
      label,
      icon,
      subtitle,
      actions,
      help,
      inline,
      labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
      ...rest,
      children: /* @__PURE__ */ jsxs($de32f1b87079253c$export$2e1e1122cf0cba88, { children: [
        /* @__PURE__ */ jsxs(
          $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
          {
            "aria-label": __("Select items", "eightshift-ui-components"),
            className: clsx(
              "es:group",
              "es:relative es:flex es:items-center es:gap-1 es:py-0.75 es:pl-0.75 es:pr-1.5 es:focus-visible:outline-hidden es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
              "es:min-h-9 es:rounded-10 es:border es:border-secondary-300 es:bg-white es:text-sm es:shadow-sm es:transition",
              "es:inset-ring es:inset-ring-secondary-100",
              "es:any-focus:outline-hidden",
              !noMinWidth && "es:min-w-48",
              !inline && "es:w-full",
              disabled && "es:select-none es:shadow-none!",
              "es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:border-accent-500 es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:ring-2 es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:ring-accent-500/50",
              className
            ),
            ref,
            children: [
              /* @__PURE__ */ jsx(
                $eed445e0843c11d0$export$41f133550aa26f48,
                {
                  "aria-label": __("Selected items", "eightshift-ui-components"),
                  layout: "grid",
                  items: currentValue,
                  selectionMode: "none",
                  dependencies: [currentValue],
                  className: "es:peer es:w-full es:flex es:items-center es:flex-wrap es:gap-0.75 es:has-dragging:inset-ring-1 es:has-dragging:inset-ring-accent-500/10 es:rounded-md es:transition es:leading-tight",
                  renderEmptyState: () => /* @__PURE__ */ jsx("div", { className: "es:text-secondary-500 es:pl-1.5 es:flex es:items-center", children: placeholder }),
                  dragAndDropHooks,
                  children: (item) => /* @__PURE__ */ jsxs(
                    $eed445e0843c11d0$export$a11e76429ed99b4,
                    {
                      id: item?.value,
                      textValue: item?.label,
                      className: clsx(
                        "es:inset-ring es:inset-ring-secondary-200/30 es:h-7 es:bg-secondary-100 es:focus-visible:inset-ring-accent-500 es:dragging:cursor-grabbing es:focus:outline-hidden es:py-1 es:px-1.5 es:rounded-7 es:dragging:inset-ring-accent-600/20 es:dragging:bg-transparent es:dragging:text-accent-600/40 es:transition es:flex es:items-center es:gap-1",
                        !disabled && selectedItems.size >= 2 && "es:cursor-move"
                      ),
                      children: [
                        customValueDisplay && customValueDisplay(truncateEnd(item?.label, 20), item),
                        !customValueDisplay && /* @__PURE__ */ jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "label", children: truncateEnd(item?.label, 20) })
                      ]
                    }
                  )
                }
              ),
              /* @__PURE__ */ jsxs("div", { className: "es:shrink-0 es:ml-auto es:peer-has-dragging:hidden", children: [
                !customDropdownArrow && cloneElement(icons.dropdownCaretAlt, {
                  className: "es:shrink-0 es:w-4 es:group-aria-expanded:-scale-y-100 es:transition-transform es:duration-200"
                }),
                customDropdownArrow && /* @__PURE__ */ jsx(
                  "div",
                  {
                    "aria-hidden": "true",
                    className: "es:shrink-0 es:group-aria-expanded:-scale-y-100 es:transition-transform es:duration-200",
                    children: customDropdownArrow
                  }
                )
              ] })
            ]
          }
        ),
        /* @__PURE__ */ jsxs(
          $07b14b47974efb58$export$5b6b19405a83ff9d,
          {
            "aria-label": __("Items", "eightshift-ui-components"),
            className: ({ isEntering, isExiting }) => clsx(
              "es:flex es:w-76 es:min-w-9 es:max-w-76 es:flex-col es:-hidden es:rounded-2xl es:border es:border-secondary-200 es:bg-white es:text-sm es:shadow-xl es:inset-ring es:inset-ring-secondary-100",
              "es:any-focus:outline-hidden",
              "es:motion-safe:motion-duration-200 es:motion-safe:motion-ease-spring-bouncy",
              "es:placement-bottom:origin-top-left es:placement-top:origin-bottom-left",
              "es:placement-left:origin-right es:placement-right:origin-left",
              isEntering && "es:motion-safe:motion-scale-in-95 es:motion-opacity-in-0",
              isEntering && "es:motion-safe:placement-top:motion-translate-y-in-[5%] es:motion-safe:placement-bottom:motion-translate-y-in-[-5%] es:motion-safe:placement-left:motion-translate-x-in-[5%] es:motion-safe:placement-right:motion-translate-x-in-[-5%]",
              isExiting && "es:motion-safe:motion-scale-out-95 es:motion-opacity-out-0",
              isExiting && "es:motion-safe:placement-top:motion-translate-y-out-[5%] es:motion-safe:placement-bottom:motion-translate-y-out-[-5%] es:motion-safe:placement-left:motion-translate-x-out-[5%] es:motion-safe:placement-right:motion-translate-x-out-[-5%]"
            ),
            placement: "bottom left",
            maxHeight: 300,
            triggerRef: ref,
            children: [
              searchable && /* @__PURE__ */ jsxs($d2f53cda644affe3$export$2f2b9559550c7bbc, { filter: contains, children: [
                /* @__PURE__ */ jsxs(
                  $440f4836bcb56932$export$b94867ecbd698f21,
                  {
                    "aria-label": __("Search", "eightshift-ui-components"),
                    className: "es:flex es:items-center es:bg-secondary-100 es:m-2 es:rounded-lg es:relative es:placeholder:text-secondary-500",
                    autoFocus: true,
                    children: [
                      /* @__PURE__ */ jsx(
                        $3985021b0ad6602f$export$f5b8910cec6cf069,
                        {
                          placeholder: __("Search...", "eightshift-ui-components"),
                          className: "es:peer es:size-full es:h-9 es:outline-hidden es:px-2.5 es:shadow-none es:text-sm es:py-0 es:[&::-webkit-search-cancel-button]:hidden"
                        }
                      ),
                      /* @__PURE__ */ jsx(
                        $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
                        {
                          "aria-label": __("Clear", "eightshift-ui-components"),
                          className: clsx(
                            "es:absolute es:right-2 es:top-0 es:bottom-0 es:my-auto",
                            "es:flex es:size-6 es:items-center es:justify-center es:rounded es:text-sm es:text-secondary-600 es:transition es:hover:bg-red-50 es:hover:text-red-900 es:any-focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:disabled:text-secondary-300 es:cursor-pointer",
                            "es:peer-placeholder-shown:opacity-0"
                          ),
                          children: icons.clearAlt
                        }
                      )
                    ]
                  }
                ),
                /* @__PURE__ */ jsx("div", { className: "es:w-full es:h-px es:bg-secondary-200 es:shrink-0" }),
                /* @__PURE__ */ jsx(
                  $eed445e0843c11d0$export$41f133550aa26f48,
                  {
                    "aria-label": __("Items", "eightshift-ui-components"),
                    selectedKeys: selectedItems,
                    selectionMode: "multiple",
                    selectionBehavior: "toggle",
                    className: clsx("es:space-y-0.5 es:p-1 es:any-focus:outline-hidden es:min-h-16", options?.length > 0 && "es:overflow-y-auto"),
                    items: options,
                    onSelectionChange: handleSelectionChange,
                    escapeKeyBehavior: "none",
                    renderEmptyState: () => /* @__PURE__ */ jsx(
                      RichLabel,
                      {
                        icon: icons.searchEmpty,
                        label: __("No results", "eightshift-ui-components"),
                        subtitle: __("Try a different search term", "eightshift-ui-components"),
                        className: "es:min-h-14 es:p-2 es:w-fit es:mx-auto es:motion-preset-slide-up es:motion-ease-spring-bouncy es:motion-duration-200 es:shrink-0",
                        iconClassName: "es:text-accent-700 es:icon:size-7!",
                        noColor: true
                      }
                    ),
                    children: (item) => {
                      let icon2 = item?.icon ?? null;
                      if (typeof item?.icon === "string") {
                        icon2 = icons?.[item.icon] ?? null;
                      }
                      return /* @__PURE__ */ jsxs(
                        OptionItemBase,
                        {
                          id: item.value,
                          className: item?.className,
                          selectIndicator: true,
                          children: [
                            customMenuOption && customMenuOption(item),
                            !customMenuOption && /* @__PURE__ */ jsx(
                              RichLabel,
                              {
                                icon: icon2,
                                label: item?.label,
                                subtitle: item?.subtitle
                              }
                            )
                          ]
                        }
                      );
                    }
                  }
                )
              ] }),
              !searchable && /* @__PURE__ */ jsx(
                $eed445e0843c11d0$export$41f133550aa26f48,
                {
                  "aria-label": __("Items", "eightshift-ui-components"),
                  autoFocus: true,
                  selectionMode: "multiple",
                  selectionBehavior: "toggle",
                  selectedKeys: selectedItems,
                  onSelectionChange: handleSelectionChange,
                  className: "es:space-y-0.5 es:p-1 es:any-focus:outline-hidden es:overflow-y-auto",
                  items: options,
                  escapeKeyBehavior: "none",
                  renderEmptyState: () => /* @__PURE__ */ jsx(
                    RichLabel,
                    {
                      icon: icons.searchEmpty,
                      label: __("No results", "eightshift-ui-components"),
                      subtitle: __("Try a different search term", "eightshift-ui-components"),
                      className: "es:min-h-14 es:p-2 es:w-fit es:mx-auto es:motion-preset-slide-up es:motion-ease-spring-bouncy es:motion-duration-200",
                      iconClassName: "es:text-accent-700 es:icon:size-7!",
                      noColor: true
                    }
                  ),
                  children: (item) => {
                    let icon2 = item?.icon ?? null;
                    if (typeof item?.icon === "string") {
                      icon2 = icons?.[item.icon] ?? null;
                    }
                    return /* @__PURE__ */ jsxs(
                      OptionItemBase,
                      {
                        id: item.value,
                        className: item?.className,
                        selectIndicator: true,
                        children: [
                          customMenuOption && customMenuOption(item),
                          !customMenuOption && /* @__PURE__ */ jsx(
                            RichLabel,
                            {
                              icon: icon2,
                              label: item?.label,
                              subtitle: item?.subtitle
                            }
                          )
                        ]
                      }
                    );
                  }
                }
              ),
              clearable && value.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
                /* @__PURE__ */ jsx("div", { className: "es:w-full es:h-px es:bg-secondary-200 es:shrink-0" }),
                /* @__PURE__ */ jsx(
                  $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
                  {
                    slot: "close",
                    onPress: () => handleSelectionChange([]),
                    className: clsx(
                      "es:flex es:h-10 es:m-1 es:select-none es:items-center es:gap-1 es:rounded-xl es:px-2 es:py-1.5 es:transition es:scroll-m-1",
                      "es:any-focus:outline-hidden es:overflow-clip",
                      "es:not-selected:hover:bg-secondary-100 es:not-selected:hover:outline-hidden",
                      "es:selected:bg-accent-600/15 es:selected:text-accent-950",
                      "es:selected:focus-visible:inset-ring es:selected:focus-visible:inset-ring-accent-600/30",
                      "es:not-selected:focus-visible:bg-secondary-100 es:not-selected:focus-visible:outline-hidden",
                      "es:active:bg-accent-700/15"
                    ),
                    children: /* @__PURE__ */ jsx(
                      RichLabel,
                      {
                        icon: icons.clearAlt,
                        label: __("Clear selection", "eightshift-ui-components")
                      }
                    )
                  }
                )
              ] })
            ]
          }
        )
      ] })
    }
  );
};
export {
  __MultiSelectNext
};
