function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

/* eslint-disable jsx-a11y/no-static-element-interactions */

/* eslint-disable jsx-a11y/click-events-have-key-events */
import React, { useState, useEffect, useRef } from 'react';
import defaultStyle from '../MultiSelect.module.css';
import multiSelectConstants from '../MultiSelect.constantProps';
import TextBoxConstantProps from '../../textbox/TextBox.constantProps';
import multiSelectWithSearchPropTypes, { defaultProps, OptionAllPropTypes, OptionPropTypes, propsDescription } from './MultiSelectWithSearch.propTypes';
import ListItem, { ListBox } from '../../listitem/ListItem';
import TextBox from '../../textbox/TextBox';
import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
import multiSelectCssJSLogic from '../MultiSelect.cssJSLogic';
export default function MultiSelectWithSearch(props) {
  const {
    children,
    isPopupOpen,
    togglePopup,
    selectedOptionsRenderer,
    selectedValues,
    onHandleRemove,
    id,
    disabled,
    readonly,
    customStyle = {},
    onSearch,
    placeholder,
    removeClose,
    searchString,
    onRemoveAll,
    emptyStateComponent,
    loadingStateComponent,
    selectedItemProps,
    valueProps,
    triggerProps,
    rootElementProps,
    inputProps,
    getFilteredOptionsData,
    onkeydown,
    focusRemove,
    tagGeneralAttributes: {
      triggerGeneralAttributes = {},
      menuGeneralAttributes = {},
      searchGeneralAttributes = {}
    },
    tagAttributes: {
      triggerTagAttributes = {},
      menuTagAttributes = {},
      searchTagAttributes = {}
    }
  } = props;
  const inputRef = useRef(null);
  const [suggestions, setSuggestions] = useState([]);
  const [isLoadingState, setLoadingState] = useState(false);
  let style = useMergeStyle(defaultStyle, customStyle);
  let classNames = multiSelectCssJSLogic(props, style);
  let tagprops = {
    variant: 'outlined',
    color: 'primary',
    size: 'small',
    onHandleRemove,
    selectedValues,
    selectedItemProps,
    ...valueProps,
    onkeydown
  };
  useEffect(() => {
    setSuggestions(selectedOptionsRenderer(tagprops));
  }, [selectedValues.length]);
  const searchProps = inputProps;
  const inpProps = !isPopupOpen ? inputProps.tagInputProps : inputProps.listInputProps;
  delete searchProps.listInputProps;
  delete searchProps.tagInputProps;
  return /*#__PURE__*/React.createElement("div", _extends({}, triggerGeneralAttributes, {
    className: classNames,
    onClick: disabled || readonly ? null : togglePopup
  }, valueProps, triggerProps, {
    id: id
  }, triggerTagAttributes), /*#__PURE__*/React.createElement("div", _extends({
    className: style.multiselectedContent
  }, rootElementProps), suggestions, /*#__PURE__*/React.createElement("span", {
    className: style.textbox
  }, /*#__PURE__*/React.createElement(TextBox, {
    tagGeneralAttributes: searchGeneralAttributes,
    variant: TextBoxConstantProps.variant.plain,
    placeholder: placeholder,
    value: searchString,
    getRef: ele => {
      inputRef.current = ele;
    },
    onFocus: e => {
      removeClose(e);
    },
    onBlur: e => {
      focusRemove(rootElementProps['data-aria-rootid']);
    },
    onChange: value => {
      if (!isPopupOpen) {
        togglePopup();
      }

      onSearch(value);
    },
    tagAttributes: { ...searchProps,
      ...inpProps,
      ...searchTagAttributes
    }
  })), /*#__PURE__*/React.createElement("span", {
    className: style.clear,
    onClick: onRemoveAll
  }, "X")), isPopupOpen ? /*#__PURE__*/React.createElement("div", {
    className: style.optionContainer
  }, /*#__PURE__*/React.createElement(ListBox, _extends({
    isEmptyState: !getFilteredOptionsData().length,
    emptyState: emptyStateComponent,
    isLoadingState: isLoadingState,
    loadingState: loadingStateComponent
  }, props, {
    tagGeneralAttributes: menuGeneralAttributes,
    tagAttributes: menuTagAttributes
  }), children)) : null);
}
export function OptionSkeleton(props) {
  const {
    onHandleSelect,
    removeClose,
    isIgnore,
    tagGeneralAttributes,
    tagAttributes
  } = props;
  return isIgnore ? /*#__PURE__*/React.createElement(ListItem, _extends({}, props, {
    onChange: (e, value) => {
      onHandleSelect(value);
      removeClose(e);
    },
    tagGeneralAttributes: tagGeneralAttributes,
    tagAttributes: tagAttributes
  })) : null;
}
export function OptionSelectAllSkeleton(props) {
  const {
    onSelectAll,
    tagGeneralAttributes,
    tagAttributes
  } = props;
  return /*#__PURE__*/React.createElement(ListItem, _extends({}, props, {
    selectedValue: "",
    value: "selectAll",
    onChange: onSelectAll,
    tagGeneralAttributes: tagGeneralAttributes,
    tagAttributes: tagAttributes
  }));
}
OptionSelectAllSkeleton.propTypes = OptionAllPropTypes;
OptionSkeleton.propTypes = OptionPropTypes;
MultiSelectWithSearch.propTypes = multiSelectWithSearchPropTypes;
MultiSelectWithSearch.defaultProps = defaultProps;
MultiSelectWithSearch.propsDescription = propsDescription;
MultiSelectWithSearch.constantProps = multiSelectConstants;