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); }

import React, { useEffect, useState } from 'react';
import defaultStyle from './MultiSelect.module.css';
import multiSelectConstants from './MultiSelect.constantProps';
import multiSelectPropTypes, { defaultProps, propsDescription } from './MultiSelect.propTypes';
import ListItem, { ListBox } from '../listitem/ListItem';
import ListItemPropTypes, { defaultProps as listItemDefaultProps, propsDescription as listItemPropsDescription } from '../listitem/ListItem.propTypes';
import ListItemConstants from '../listitem/ListItem.constantProps';
import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
import multiSelectCssJSLogic from './MultiSelect.cssJSLogic';
export default function MultiSelect(props) {
  let {
    children,
    isPopupOpen,
    togglePopup,
    selectedOptionsRenderer,
    selectedValues = [],
    onHandleRemove,
    disabled,
    readonly,
    customStyle = {},
    onkeydown,
    placeholder,
    emptyStateComponent,
    valueProps,
    triggerProps,
    selectedItemProps,
    rootElementProps,
    filteredOptions = [],
    isLoadingState,
    loadingStateComponent,
    isEmptyState,
    tagGeneralAttributes: {
      triggerGeneralAttributes = {},
      menuGeneralAttributes = {}
    },
    tagAttributes: {
      triggerTagAttributes = {},
      menuTagAttributes = {}
    }
  } = props;
  const [suggestions, setSuggestions] = useState([]);
  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]);
  return /*#__PURE__*/React.createElement("div", _extends({
    className: classNames,
    onClick: disabled || readonly ? null : togglePopup
  }, triggerGeneralAttributes, valueProps, triggerProps, triggerTagAttributes), /*#__PURE__*/React.createElement("div", _extends({
    className: style.multiselectedContent
  }, rootElementProps), suggestions, /*#__PURE__*/React.createElement("span", {
    className: style.placeholder
  }, placeholder)), isPopupOpen ? /*#__PURE__*/React.createElement("div", {
    className: style.optionContainer
  }, /*#__PURE__*/React.createElement(ListBox, _extends({
    tagGeneralAttributes: menuGeneralAttributes,
    isEmptyState: !filteredOptions.length,
    emptyState: emptyStateComponent,
    isLoadingState: isLoadingState,
    loadingState: loadingStateComponent,
    isEmpty: children.length
  }, props, {
    tagAttributes: menuTagAttributes
  }), children)) : null);
}
export function OptionSkeleton(props) {
  let {
    value,
    onHandleSelect,
    removeClose,
    isIgnore,
    tagGeneralAttributes,
    tagAttributes
  } = props;
  return isIgnore ? /*#__PURE__*/React.createElement(ListItem, _extends({
    tagGeneralAttributes: tagGeneralAttributes
  }, props, {
    onChange: (e, value) => {
      onHandleSelect(value);
      removeClose(e);
    },
    tagAttributes: tagAttributes
  })) : null;
}
OptionSkeleton.displayName = 'Option';
OptionSkeleton.propTypes = ListItemPropTypes;
OptionSkeleton.defaultProps = listItemDefaultProps;
OptionSkeleton.propsDescription = listItemPropsDescription;
OptionSkeleton.constantProps = ListItemConstants;
export function selectedOptionSkeleton(props) {
  let {
    color,
    variant,
    size,
    shape,
    onHandleRemove,
    selectedValues
  } = props;

  if (selectedValues.length) {
    return selectedValues.length && selectedValues.map((val, i) => {
      return /*#__PURE__*/React.createElement(Tag, {
        color: color,
        variant: variant,
        size: size,
        shape: shape,
        text: val,
        tabIndex: 0,
        endIcon: /*#__PURE__*/React.createElement(Icon, {
          onClick: () => {
            onHandleRemove(val);
          }
        })
      });
    });
  } else {
    return null;
  }
}
MultiSelect.propTypes = multiSelectPropTypes;
MultiSelect.defaultProps = defaultProps;
MultiSelect.propsDescription = propsDescription;
MultiSelect.constantProps = multiSelectConstants;