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 no-unused-expressions */

/* eslint-disable react-hooks/exhaustive-deps */

/* eslint-disable jsx-a11y/click-events-have-key-events */
import React, { useState, useEffect } from 'react';
import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
import defaultStyle from '../MultiSelect.module.css';
import multiSelectConstants from '../MultiSelect.constantProps';
import multiSelectWithTagPropTypes, { defaultProps, propsDescription, OptionPropTypes, OptionAllPropTypes } from './MultiSelectWithTag.propTypes';
import ListItem, { ListBox } from '../../listitem/ListItem';
import TextBox from '../../textbox/TextBox';
import TextBoxConstantProps from '../../textbox/TextBox.constantProps';
import multiSelectCssJSLogic from '../MultiSelect.cssJSLogic';
export default function MultiSelectWithTag(props) {
  const {
    children,
    isPopupOpen,
    togglePopup,
    selectedOptionsRenderer,
    selectedValues,
    id,
    disabled,
    readonly,
    customStyle = {},
    onSearch,
    placeholder,
    removeClose,
    searchString,
    onKeyDown,
    onHandleRemove,
    onPaste,
    selectedItemProps,
    valueProps,
    isEmptyState,
    isLoadingState,
    emptyState,
    loadingState,
    triggerProps,
    rootElementProps,
    inputProps,
    focusRemove,
    onShortcutKeys,
    tagGeneralAttributes: {
      triggerGeneralAttributes = {},
      menuGeneralAttributes = {},
      searchGeneralAttributes = {},
      tagsGeneralAttributes = {}
    },
    tagAttributes: {
      triggerTagAttributes = {},
      menuTagAttributes = {},
      searchTagAttributes = {},
      tagsTagAttributes = {}
    }
  } = props;
  const style = useMergeStyle(defaultStyle, customStyle);
  const classNames = multiSelectCssJSLogic(props, style);
  const [suggestions, setSuggestions] = useState([]);
  const tagprops = {
    variant: 'outlined',
    color: 'primary',
    size: 'small',
    onHandleRemove,
    selectedValues,
    selectedItemProps,
    ...valueProps,
    //    onkeydown: onShortcutKeys,
    tagGeneralAttributes: tagsGeneralAttributes,
    tagAttributes: tagsTagAttributes
  };
  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, {
    onClick: disabled || readonly ? null : togglePopup,
    className: classNames
  }, valueProps, triggerProps, triggerTagAttributes, {
    id: id
  }), /*#__PURE__*/React.createElement("div", _extends({
    className: style.multiselectedContent,
    onKeyDown: e => {
      onShortcutKeys(e);
    }
  }, rootElementProps), suggestions, /*#__PURE__*/React.createElement("span", {
    className: style.textbox
  }, /*#__PURE__*/React.createElement(TextBox, {
    variant: TextBoxConstantProps.variant.plain,
    placeholder: placeholder,
    value: searchString,
    onFocus: e => {
      removeClose(e);
    },
    onKeyDown: e => {
      inpProps && inpProps.onKeyDown && inpProps.onKeyDown(e);
      onKeyDown(e);
    },
    onPaste: onPaste,
    onBlur: () => focusRemove(rootElementProps['data-aria-rootid']),
    onChange: value => {
      onSearch(value);
    },
    tagGeneralAttributes: searchGeneralAttributes,
    tagAttributes: { ...searchProps,
      ...searchTagAttributes
    }
  }))), isPopupOpen && children ? /*#__PURE__*/React.createElement("div", {
    className: style.optionContainer
  }, /*#__PURE__*/React.createElement(ListBox, _extends({
    isEmptyState: isEmptyState,
    isLoadingState: isLoadingState,
    emptyState: emptyState,
    loadingState: loadingState,
    tagGeneralAttributes: menuGeneralAttributes,
    tagAttributes: menuTagAttributes
  }, props), children)) : null);
}
export function OptionSkeleton(props) {
  const {
    onHandleSelect,
    removeClose,
    isIgnore
  } = props;
  return isIgnore ? /*#__PURE__*/React.createElement(ListItem, _extends({}, props, {
    onChange: (e, value) => {
      onHandleSelect(value);
      removeClose(e);
    }
  })) : null;
}
export function OptionSelectAllSkeleton(props) {
  const {
    onHandleSelect,
    removeClose,
    isIgnore
  } = props;
  return isIgnore ? /*#__PURE__*/React.createElement(ListItem, _extends({}, props, {
    onChange: (e, value) => {
      onHandleSelect(value);
      removeClose(e);
    }
  })) : null;
}
OptionSelectAllSkeleton.propTypes = OptionAllPropTypes;
OptionSkeleton.propTypes = OptionPropTypes;
MultiSelectWithTag.propTypes = multiSelectWithTagPropTypes;
MultiSelectWithTag.defaultProps = defaultProps;
MultiSelectWithTag.propsDescription = propsDescription;
MultiSelectWithTag.constantProps = multiSelectConstants;