import { E as compilerRuntimeExports, r as reactExports, a as r, j as jsxRuntimeExports } from "./vendor-react-DYNCg6N5.js";
import { u as useDebounce } from "./useDebounce-DTubzIUC.js";
import { av as Combobox, G as Group, d as Checkbox, aE as Pill, au as useCombobox, aF as PillsInput } from "./vendor-mantine-h0WlM2Mj.js";
const usePillAutoCompleteContext = (args) => {
  const $ = compilerRuntimeExports.c(25);
  const {
    loaderData,
    mapDataToOptions,
    defaultValues,
    defaultOptions,
    onValueChange
  } = args;
  const [input, setInput] = reactExports.useState("");
  const debounced = useDebounce(input, 500);
  let t0;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t0 = [];
    $[0] = t0;
  } else {
    t0 = $[0];
  }
  const [loadedOptions, setLoadedOptions] = reactExports.useState(t0);
  let t1;
  if ($[1] !== defaultValues) {
    t1 = [...defaultValues];
    $[1] = defaultValues;
    $[2] = t1;
  } else {
    t1 = $[2];
  }
  const [values, setValues] = reactExports.useState(t1);
  const [isLoading, setIsLoading] = reactExports.useState(false);
  const requestIdRef = r.useRef(0);
  let t2;
  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
    t2 = () => setIsLoading(false);
    $[3] = t2;
  } else {
    t2 = $[3];
  }
  const stopLoading = t2;
  let t3;
  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
    t3 = () => setIsLoading(true);
    $[4] = t3;
  } else {
    t3 = $[4];
  }
  const startLoading = t3;
  let t4;
  let t5;
  if ($[5] !== defaultValues) {
    t4 = () => {
      setValues([...defaultValues]);
    };
    t5 = [defaultValues];
    $[5] = defaultValues;
    $[6] = t4;
    $[7] = t5;
  } else {
    t4 = $[6];
    t5 = $[7];
  }
  reactExports.useEffect(t4, t5);
  let t6;
  let t7;
  if ($[8] !== debounced || $[9] !== loaderData || $[10] !== mapDataToOptions) {
    t6 = () => {
      if (!loaderData || !mapDataToOptions) {
        return;
      }
      requestIdRef.current = requestIdRef.current + 1;
      const currentRequestId = requestIdRef.current;
      startLoading();
      loaderData(debounced).then((res) => {
        if (currentRequestId === requestIdRef.current) {
          setLoadedOptions(res.map(mapDataToOptions));
        }
      }).catch(_temp$1).finally(() => {
        if (currentRequestId === requestIdRef.current) {
          stopLoading();
        }
      });
    };
    t7 = [debounced, loaderData, mapDataToOptions];
    $[8] = debounced;
    $[9] = loaderData;
    $[10] = mapDataToOptions;
    $[11] = t6;
    $[12] = t7;
  } else {
    t6 = $[11];
    t7 = $[12];
  }
  reactExports.useEffect(t6, t7);
  let t8;
  let t9;
  if ($[13] !== onValueChange || $[14] !== values) {
    t8 = () => {
      onValueChange(values);
    };
    t9 = [values, onValueChange];
    $[13] = onValueChange;
    $[14] = values;
    $[15] = t8;
    $[16] = t9;
  } else {
    t8 = $[15];
    t9 = $[16];
  }
  reactExports.useEffect(t8, t9);
  let t10;
  bb0: {
    if (loadedOptions.length === 0) {
      t10 = defaultOptions;
      break bb0;
    }
    let mergedOptions;
    if ($[17] !== defaultOptions || $[18] !== loadedOptions) {
      mergedOptions = [...defaultOptions];
      loadedOptions.forEach((option) => {
        if (!mergedOptions.find((opt) => opt.value === option.value)) {
          mergedOptions.push(option);
        }
      });
      $[17] = defaultOptions;
      $[18] = loadedOptions;
      $[19] = mergedOptions;
    } else {
      mergedOptions = $[19];
    }
    t10 = mergedOptions;
  }
  const options = t10;
  let t11;
  if ($[20] !== input || $[21] !== isLoading || $[22] !== options || $[23] !== values) {
    t11 = {
      options,
      input,
      values,
      isLoading,
      setValues,
      setInput
    };
    $[20] = input;
    $[21] = isLoading;
    $[22] = options;
    $[23] = values;
    $[24] = t11;
  } else {
    t11 = $[24];
  }
  return t11;
};
function _temp$1(error) {
  console.error("Error loading options:", error);
}
const DefaultOption = (props) => {
  const $ = compilerRuntimeExports.c(30);
  const {
    item,
    values
  } = props;
  let T0;
  let T1;
  let T2;
  let t0;
  let t1;
  let t2;
  let t3;
  let t4;
  let t5;
  if ($[0] !== item || $[1] !== values) {
    const valuesIds = values.map(_temp);
    T2 = Combobox.Option;
    if ($[11] !== item.value) {
      t3 = item.value.toString();
      $[11] = item.value;
      $[12] = t3;
    } else {
      t3 = $[12];
    }
    t4 = item.value;
    t5 = values.includes(item);
    T1 = Group;
    t2 = "sm";
    T0 = Checkbox;
    t0 = true;
    t1 = valuesIds.includes(item.value);
    $[0] = item;
    $[1] = values;
    $[2] = T0;
    $[3] = T1;
    $[4] = T2;
    $[5] = t0;
    $[6] = t1;
    $[7] = t2;
    $[8] = t3;
    $[9] = t4;
    $[10] = t5;
  } else {
    T0 = $[2];
    T1 = $[3];
    T2 = $[4];
    t0 = $[5];
    t1 = $[6];
    t2 = $[7];
    t3 = $[8];
    t4 = $[9];
    t5 = $[10];
  }
  let t6;
  if ($[13] !== T0 || $[14] !== t0 || $[15] !== t1) {
    t6 = /* @__PURE__ */ jsxRuntimeExports.jsx(T0, { readOnly: t0, checked: t1, size: "xs" });
    $[13] = T0;
    $[14] = t0;
    $[15] = t1;
    $[16] = t6;
  } else {
    t6 = $[16];
  }
  let t7;
  if ($[17] !== item.label) {
    t7 = /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: item.label });
    $[17] = item.label;
    $[18] = t7;
  } else {
    t7 = $[18];
  }
  let t8;
  if ($[19] !== T1 || $[20] !== t2 || $[21] !== t6 || $[22] !== t7) {
    t8 = /* @__PURE__ */ jsxRuntimeExports.jsxs(T1, { gap: t2, children: [
      t6,
      t7
    ] });
    $[19] = T1;
    $[20] = t2;
    $[21] = t6;
    $[22] = t7;
    $[23] = t8;
  } else {
    t8 = $[23];
  }
  let t9;
  if ($[24] !== T2 || $[25] !== t3 || $[26] !== t4 || $[27] !== t5 || $[28] !== t8) {
    t9 = /* @__PURE__ */ jsxRuntimeExports.jsx(T2, { value: t3, active: t5, children: t8 }, t4);
    $[24] = T2;
    $[25] = t3;
    $[26] = t4;
    $[27] = t5;
    $[28] = t8;
    $[29] = t9;
  } else {
    t9 = $[29];
  }
  return t9;
};
function _temp(value) {
  return value.value;
}
const DefaultPill = (props) => {
  const $ = compilerRuntimeExports.c(10);
  const {
    item,
    renderLabel,
    handleValueRemove
  } = props;
  let t0;
  if ($[0] !== handleValueRemove || $[1] !== item) {
    t0 = () => handleValueRemove(item);
    $[0] = handleValueRemove;
    $[1] = item;
    $[2] = t0;
  } else {
    t0 = $[2];
  }
  let t1;
  if ($[3] !== item || $[4] !== renderLabel) {
    t1 = renderLabel ? renderLabel(item) : item.label;
    $[3] = item;
    $[4] = renderLabel;
    $[5] = t1;
  } else {
    t1 = $[5];
  }
  let t2;
  if ($[6] !== item.value || $[7] !== t0 || $[8] !== t1) {
    t2 = /* @__PURE__ */ jsxRuntimeExports.jsx(Pill, { withRemoveButton: true, onRemove: t0, children: t1 }, item.value);
    $[6] = item.value;
    $[7] = t0;
    $[8] = t1;
    $[9] = t2;
  } else {
    t2 = $[9];
  }
  return t2;
};
const defaultRenderLabel = (item) => item.label;
const PillsInputAutoCompleteWithQuery = (props) => {
  const {
    defaultValues = [],
    options: defaultOptions = [],
    onValueChange,
    loaderData,
    mapDataToOptions,
    renderLabel = defaultRenderLabel,
    RenderOption = DefaultOption,
    RenderPill = DefaultPill
  } = props;
  const {
    options,
    input,
    setInput,
    values,
    setValues
  } = usePillAutoCompleteContext({
    defaultValues,
    defaultOptions,
    onValueChange,
    loaderData,
    mapDataToOptions
  });
  const combobox = useCombobox({
    onDropdownClose: () => combobox.resetSelectedOption(),
    onDropdownOpen: () => combobox.updateSelectedOptionIndex("active")
  });
  const actualOptions = reactExports.useMemo(() => options.filter(Boolean), [options]);
  const handleValueSelect = reactExports.useCallback((name) => {
    const val = actualOptions.find((item) => item.value.toString() === name);
    if (!val) return;
    setValues((current) => current.map((i) => i.value).includes(val.value) ? current.filter((v) => v.value !== val.value) : [...current, val]);
  }, [actualOptions, setValues]);
  const handleValueRemove = reactExports.useCallback((val_0) => {
    setValues((current_0) => current_0.filter((v_0) => v_0.value !== val_0.value));
  }, [setValues]);
  const onChange = reactExports.useCallback((event) => {
    combobox.updateSelectedOptionIndex();
    setInput(event.currentTarget.value);
  }, [combobox, setInput]);
  const onKeyDown = reactExports.useCallback((event_0) => {
    if (event_0.key === "Backspace" && input.length === 0) {
      event_0.preventDefault();
      handleValueRemove(values[values.length - 1]);
    }
  }, [input, values, handleValueRemove]);
  const onFocus = reactExports.useCallback(() => combobox.openDropdown(), [combobox]);
  const onBlur = reactExports.useCallback(() => combobox.closeDropdown(), [combobox]);
  const valuesToRender = reactExports.useMemo(() => values.map((item_0) => /* @__PURE__ */ jsxRuntimeExports.jsx(RenderPill, { item: item_0, input, values, renderLabel, handleValueRemove }, item_0.value)), [values, input, renderLabel, handleValueRemove]);
  const optionsToRender = reactExports.useMemo(() => actualOptions.map((item_1, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(RenderOption, { options, input, setInput, item: item_1, values, setValues }, index)), [actualOptions, options, input, setInput, values, setValues]);
  const hasOptions = reactExports.useMemo(() => actualOptions.length > 0, [actualOptions]);
  const defaultProps = {
    PillsInputProps: {
      onClick: onFocus
    },
    PillGroupProps: {},
    PillsInputFieldProps: {
      onFocus,
      onBlur,
      value: input,
      placeholder: "Search values",
      onChange,
      onKeyDown
    },
    ComboboxEventsTargetProps: {},
    ComboboxProps: {
      store: combobox,
      withinPortal: false,
      onOptionSubmit: handleValueSelect
    },
    ComboboxDropdownTargetProps: {},
    ComboboxDropdownProps: {},
    ComboboxOptionsProps: {},
    ComboboxEmptyProps: {
      children: "No options"
    }
  };
  const {
    PillsInputProps: PillsInputProps2 = defaultProps.PillsInputProps,
    PillGroupProps: PillGroupProps2 = defaultProps.PillGroupProps,
    PillsInputFieldProps: PillsInputFieldProps2 = defaultProps.PillsInputFieldProps,
    ComboboxEventsTargetProps: ComboboxEventsTargetProps2 = defaultProps.ComboboxEventsTargetProps,
    ComboboxProps: ComboboxProps2 = defaultProps.ComboboxProps,
    ComboboxDropdownTargetProps: ComboboxDropdownTargetProps2 = defaultProps.ComboboxDropdownTargetProps,
    ComboboxDropdownProps: ComboboxDropdownProps2 = defaultProps.ComboboxDropdownProps,
    ComboboxOptionsProps: ComboboxOptionsProps2 = defaultProps.ComboboxOptionsProps,
    ComboboxEmptyProps: ComboboxEmptyProps2 = defaultProps.ComboboxEmptyProps
  } = props.props || defaultProps;
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Combobox, { ...defaultProps.ComboboxProps, ...ComboboxProps2, children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(Combobox.DropdownTarget, { ...defaultProps.ComboboxDropdownTargetProps, ...ComboboxDropdownTargetProps2, children: /* @__PURE__ */ jsxRuntimeExports.jsx(PillsInput, { ...defaultProps.PillsInputProps, ...PillsInputProps2, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Pill.Group, { ...defaultProps.PillGroupProps, ...PillGroupProps2, children: [
      valuesToRender,
      /* @__PURE__ */ jsxRuntimeExports.jsx(Combobox.EventsTarget, { ...defaultProps.ComboboxEventsTargetProps, ...ComboboxEventsTargetProps2, children: /* @__PURE__ */ jsxRuntimeExports.jsx(PillsInput.Field, { ...defaultProps.PillsInputFieldProps, ...PillsInputFieldProps2 }) })
    ] }) }) }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(Combobox.Dropdown, { ...defaultProps.ComboboxDropdownProps, ...ComboboxDropdownProps2, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Combobox.Options, { ...defaultProps.ComboboxOptionsProps, ...ComboboxOptionsProps2, children: [
      hasOptions && optionsToRender,
      !hasOptions && /* @__PURE__ */ jsxRuntimeExports.jsx(Combobox.Empty, { ...defaultProps.ComboboxEmptyProps, ...ComboboxEmptyProps2, children: ComboboxEmptyProps2.children })
    ] }) })
  ] });
};
r.memo(PillsInputAutoCompleteWithQuery, (prevProps, nextProps) => {
  if (prevProps.options !== nextProps.options) return false;
  if (prevProps.defaultValues !== nextProps.defaultValues) return false;
  if (prevProps.onValueChange !== nextProps.onValueChange) return false;
  if (prevProps.renderLabel !== nextProps.renderLabel) return false;
  if (prevProps.loaderData !== nextProps.loaderData) return false;
  if (prevProps.mapDataToOptions !== nextProps.mapDataToOptions) return false;
  if (prevProps.RenderOption !== nextProps.RenderOption) return false;
  if (prevProps.RenderPill !== nextProps.RenderPill) return false;
  if (JSON.stringify(prevProps.props) !== JSON.stringify(nextProps.props)) return false;
  return true;
});
export {
  PillsInputAutoCompleteWithQuery as P
};
//# sourceMappingURL=index-BBtw-2vv.js.map
