/* eslint-disable react/no-array-index-key */

/* eslint-disable jsx-a11y/click-events-have-key-events */

/* eslint-disable jsx-a11y/no-static-element-interactions */
import React from 'react';
import PropTypes from 'prop-types';
import { tagAttributes } from '@zohodesk/utils/es/props/tagAttributeProps';
import { tagGeneralAttributes } from '@zohodesk/utils/es/props/tagGeneralAttributeProps';
import Tag from '../../tag/Tag';
import { commonMultiSelectProps, defaultProps as multiSelectDefaultProps, propsDescription as multiselectPropsDescription } from '../MultiSelect.propTypes';

function Icon(props) {
  const {
    onClick
  } = props;
  return /*#__PURE__*/React.createElement("span", {
    onClick: onClick
  }, "X");
}

Icon.propTypes = {
  onClick: PropTypes.func
};
export default { ...commonMultiSelectProps,
  [tagGeneralAttributes]: PropTypes.shape({
    triggerGeneralAttributes: PropTypes.object,
    menuGeneralAttributes: PropTypes.object,
    searchGeneralAttributes: PropTypes.object,
    tagsGeneralAttributes: PropTypes.object
  }),
  [tagAttributes]: PropTypes.shape({
    triggerTagAttributes: PropTypes.object,
    menuTagAttributes: PropTypes.object,
    searchTagAttributes: PropTypes.object,
    tagsTagAttributes: PropTypes.object
  })
};
export const OptionPropTypes = {
  onHandleSelect: PropTypes.func,
  removeClose: PropTypes.func,
  isIgnore: PropTypes.bool
};
export const OptionAllPropTypes = { ...OptionPropTypes,
  onSelectAll: PropTypes.func
};
export const defaultProps = { ...multiSelectDefaultProps,
  isEmptyState: false,
  isLoadingState: false,
  emptyState: () => {},
  loadingState: () => {},
  onValidation: _ref => {
    let {
      value,
      selectedSuggestions
    } = _ref;
    return true;
  },
  // selectedOptionsRenderer to be change
  selectedOptionsRenderer: props => {
    const TagConstantProps = Tag.constantProps;
    const {
      onHandleRemove,
      selectedItemProps,
      onkeydown,
      selectedValues,
      disabled
    } = props;

    if (selectedValues.length) {
      return selectedValues.length && selectedValues.map((val, i) => {
        const tagItemProps = selectedItemProps({
          value: `${val}`,
          active: false,
          disabled: false
        }); //console.log(tagItemProps,'tip');

        return /*#__PURE__*/React.createElement("span", {
          key: i,
          style: {
            margin: '0 var(--lib_size_6) var(--lib_size_6) 0'
          }
        }, /*#__PURE__*/React.createElement(Tag, {
          key: i,
          color: TagConstantProps.color.secondary,
          variant: TagConstantProps.variant.outlined,
          size: TagConstantProps.size.small,
          shape: TagConstantProps.shape.rectangle,
          text: val,
          tabIndex: 0,
          tagGeneralAttributes: tagItemProps,
          endIcon: /*#__PURE__*/React.createElement(Icon, {
            onClick: () => onHandleRemove(val)
          })
        }));
      });
    }

    return null;
  },
  // eslint-disable-next-line react/display-name
  emptyStateComponent: () => /*#__PURE__*/React.createElement("div", null, "Empty")
};
export const propsDescription = { ...multiselectPropsDescription
};