'use client';
import React, { useEffect } from 'react';
import { useId, useUncontrolled } from '@mantine/hooks';
import 'clsx';
import { useResolvedStylesApi } from '../../core/styles-api/use-resolved-styles-api/use-resolved-styles-api.mjs';
import { useStyles } from '../../core/styles-api/use-styles/use-styles.mjs';
import '../../core/MantineProvider/Mantine.context.mjs';
import '../../core/MantineProvider/default-theme.mjs';
import '../../core/MantineProvider/MantineProvider.mjs';
import '../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.mjs';
import { useProps } from '../../core/MantineProvider/use-props/use-props.mjs';
import { extractStyleProps } from '../../core/Box/style-props/extract-style-props/extract-style-props.mjs';
import '../../core/Box/Box.mjs';
import { factory } from '../../core/factory/factory.mjs';
import '../../core/DirectionProvider/DirectionProvider.mjs';
import { getParsedComboboxData } from '../Combobox/get-parsed-combobox-data/get-parsed-combobox-data.mjs';
import { getOptionsLockup } from '../Combobox/get-options-lockup/get-options-lockup.mjs';
import '../Combobox/ComboboxChevron/ComboboxChevron.mjs';
import { Combobox } from '../Combobox/Combobox.mjs';
import '../Combobox/ComboboxDropdown/ComboboxDropdown.mjs';
import '../Combobox/ComboboxOptions/ComboboxOptions.mjs';
import '../Combobox/ComboboxOption/ComboboxOption.mjs';
import '../Combobox/ComboboxTarget/ComboboxTarget.mjs';
import '../Combobox/ComboboxSearch/ComboboxSearch.mjs';
import '../Combobox/ComboboxEmpty/ComboboxEmpty.mjs';
import '../Combobox/ComboboxFooter/ComboboxFooter.mjs';
import '../Combobox/ComboboxHeader/ComboboxHeader.mjs';
import '../Combobox/ComboboxEventsTarget/ComboboxEventsTarget.mjs';
import '../Combobox/ComboboxDropdownTarget/ComboboxDropdownTarget.mjs';
import '../Combobox/ComboboxGroup/ComboboxGroup.mjs';
import '../Combobox/ComboboxClearButton/ComboboxClearButton.mjs';
import { OptionsDropdown } from '../Combobox/OptionsDropdown/OptionsDropdown.mjs';
import { useCombobox } from '../Combobox/use-combobox/use-combobox.mjs';
import '../Combobox/Combobox.context.mjs';
import { InputBase } from '../InputBase/InputBase.mjs';
import { Pill } from '../Pill/Pill.mjs';
import '../Pill/PillGroup/PillGroup.mjs';
import { PillsInput } from '../PillsInput/PillsInput.mjs';
import '../PillsInput/PillsInputField/PillsInputField.mjs';
import { filterPickedValues } from './filter-picked-values.mjs';

const defaultProps = {
  maxValues: Infinity,
  withCheckIcon: true,
  checkIconPosition: "left",
  hiddenInputValuesDivider: ","
};
const MultiSelect = factory((_props, ref) => {
  const props = useProps("MultiSelect", defaultProps, _props);
  const {
    classNames,
    className,
    style,
    styles,
    unstyled,
    vars,
    size,
    value,
    defaultValue,
    onChange,
    onKeyDown,
    variant,
    data,
    dropdownOpened,
    defaultDropdownOpened,
    onDropdownOpen,
    onDropdownClose,
    selectFirstOptionOnChange,
    onOptionSubmit,
    comboboxProps,
    filter,
    limit,
    withScrollArea,
    maxDropdownHeight,
    searchValue,
    defaultSearchValue,
    onSearchChange,
    readOnly,
    disabled,
    onFocus,
    onBlur,
    onPaste,
    radius,
    rightSection,
    rightSectionWidth,
    rightSectionPointerEvents,
    rightSectionProps,
    leftSection,
    leftSectionWidth,
    leftSectionPointerEvents,
    leftSectionProps,
    inputContainer,
    inputWrapperOrder,
    withAsterisk,
    labelProps,
    descriptionProps,
    errorProps,
    wrapperProps,
    description,
    label,
    error,
    maxValues,
    searchable,
    nothingFoundMessage,
    withCheckIcon,
    checkIconPosition,
    hidePickedOptions,
    withErrorStyles,
    name,
    form,
    id,
    clearable,
    clearButtonProps,
    hiddenInputProps,
    placeholder,
    hiddenInputValuesDivider,
    required,
    mod,
    ...others
  } = props;
  const _id = useId(id);
  const parsedData = getParsedComboboxData(data);
  const optionsLockup = getOptionsLockup(parsedData);
  const combobox = useCombobox({
    opened: dropdownOpened,
    defaultOpened: defaultDropdownOpened,
    onDropdownOpen,
    onDropdownClose: () => {
      onDropdownClose?.();
      combobox.resetSelectedOption();
    }
  });
  const {
    styleProps,
    rest: { type, ...rest }
  } = extractStyleProps(others);
  const [_value, setValue] = useUncontrolled({
    value,
    defaultValue,
    finalValue: [],
    onChange
  });
  const [_searchValue, setSearchValue] = useUncontrolled({
    value: searchValue,
    defaultValue: defaultSearchValue,
    finalValue: "",
    onChange: onSearchChange
  });
  const getStyles = useStyles({
    name: "MultiSelect",
    classes: {},
    props,
    classNames,
    styles,
    unstyled
  });
  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
    props,
    styles,
    classNames
  });
  const handleInputKeydown = (event) => {
    onKeyDown?.(event);
    if (event.key === " " && !searchable) {
      event.preventDefault();
      combobox.toggleDropdown();
    }
    if (event.key === "Backspace" && _searchValue.length === 0 && _value.length > 0) {
      setValue(_value.slice(0, _value.length - 1));
    }
  };
  const values = _value.map((item, index) => /* @__PURE__ */ React.createElement(
    Pill,
    {
      key: `${item}-${index}`,
      withRemoveButton: !readOnly,
      onRemove: () => setValue(_value.filter((i) => item !== i)),
      unstyled,
      ...getStyles("pill")
    },
    optionsLockup[item]?.label || item
  ));
  useEffect(() => {
    if (selectFirstOptionOnChange) {
      combobox.selectFirstOption();
    }
  }, [selectFirstOptionOnChange, _value]);
  const clearButton = clearable && _value.length > 0 && !disabled && !readOnly && /* @__PURE__ */ React.createElement(
    Combobox.ClearButton,
    {
      size,
      ...clearButtonProps,
      onClear: () => {
        setValue([]);
        setSearchValue("");
      }
    }
  );
  const filteredData = filterPickedValues({ data: parsedData, value: _value });
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
    Combobox,
    {
      store: combobox,
      classNames: resolvedClassNames,
      styles: resolvedStyles,
      unstyled,
      size,
      readOnly,
      __staticSelector: "MultiSelect",
      onOptionSubmit: (val) => {
        onOptionSubmit?.(val);
        setSearchValue("");
        combobox.updateSelectedOptionIndex("selected");
        if (_value.includes(optionsLockup[val].value)) {
          setValue(_value.filter((v) => v !== optionsLockup[val].value));
        } else if (_value.length < maxValues) {
          setValue([..._value, optionsLockup[val].value]);
        }
      },
      ...comboboxProps
    },
    /* @__PURE__ */ React.createElement(Combobox.DropdownTarget, null, /* @__PURE__ */ React.createElement(
      PillsInput,
      {
        ...styleProps,
        __staticSelector: "MultiSelect",
        classNames: resolvedClassNames,
        styles: resolvedStyles,
        unstyled,
        size,
        className,
        style,
        variant,
        disabled,
        radius,
        rightSection: rightSection || clearButton || /* @__PURE__ */ React.createElement(Combobox.Chevron, { size, error, unstyled }),
        rightSectionPointerEvents: rightSectionPointerEvents || (clearButton ? "all" : "none"),
        rightSectionWidth,
        rightSectionProps,
        leftSection,
        leftSectionWidth,
        leftSectionPointerEvents,
        leftSectionProps,
        inputContainer,
        inputWrapperOrder,
        withAsterisk,
        labelProps,
        descriptionProps,
        errorProps,
        wrapperProps,
        description,
        label,
        error,
        multiline: true,
        withErrorStyles,
        __stylesApiProps: {
          ...props,
          rightSectionPointerEvents: rightSectionPointerEvents || (clearButton ? "all" : "none"),
          multiline: true
        },
        pointer: !searchable,
        onClick: () => searchable ? combobox.openDropdown() : combobox.toggleDropdown(),
        "data-expanded": combobox.dropdownOpened || void 0,
        id: _id,
        required,
        mod
      },
      /* @__PURE__ */ React.createElement(Pill.Group, { disabled, unstyled, ...getStyles("pillsList") }, values, /* @__PURE__ */ React.createElement(Combobox.EventsTarget, null, /* @__PURE__ */ React.createElement(
        PillsInput.Field,
        {
          ...rest,
          ref,
          id: _id,
          placeholder,
          type: !searchable && !placeholder ? "hidden" : "visible",
          ...getStyles("inputField"),
          unstyled,
          onFocus: (event) => {
            onFocus?.(event);
            searchable && combobox.openDropdown();
          },
          onBlur: (event) => {
            onBlur?.(event);
            combobox.closeDropdown();
            setSearchValue("");
          },
          onKeyDown: handleInputKeydown,
          value: _searchValue,
          onChange: (event) => {
            setSearchValue(event.currentTarget.value);
            searchable && combobox.openDropdown();
            selectFirstOptionOnChange && combobox.selectFirstOption();
          },
          disabled,
          readOnly: readOnly || !searchable,
          pointer: !searchable
        }
      )))
    )),
    /* @__PURE__ */ React.createElement(
      OptionsDropdown,
      {
        data: hidePickedOptions ? filteredData : parsedData,
        hidden: readOnly || disabled,
        filter,
        search: _searchValue,
        limit,
        hiddenWhenEmpty: !searchable || !nothingFoundMessage || hidePickedOptions && filteredData.length === 0 && _searchValue.trim().length === 0,
        withScrollArea,
        maxDropdownHeight,
        filterOptions: searchable,
        value: _value,
        checkIconPosition,
        withCheckIcon,
        nothingFoundMessage,
        unstyled,
        labelId: `${_id}-label`
      }
    )
  ), /* @__PURE__ */ React.createElement(
    "input",
    {
      type: "hidden",
      name,
      value: _value.join(hiddenInputValuesDivider),
      form,
      disabled,
      ...hiddenInputProps
    }
  ));
});
MultiSelect.classes = { ...InputBase.classes, ...Combobox.classes };
MultiSelect.displayName = "@mantine/core/MultiSelect";

export { MultiSelect };
//# sourceMappingURL=MultiSelect.mjs.map
