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

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

/* eslint-disable jsx-a11y/no-static-element-interactions */
import React from 'react';
import PropTypes from 'prop-types';
import constantsProps from '../MultiSelect.constantProps';
import Tag from '../../tag/Tag';
import TagConstantProps from '../../tag/Tag.constantProps';
import { commonMultiSelectProps } from '../MultiSelect.propTypes';
import { customStyle } from '@zohodesk/utils/es/props/customStyleProps';
import { tagAttributes } from '@zohodesk/utils/es/props/tagAttributeProps';
import { tagGeneralAttributes } from '@zohodesk/utils/es/props/tagGeneralAttributeProps';

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

Icon.propTypes = {
  onClick: PropTypes.func
};
export default { ...commonMultiSelectProps,
  [tagGeneralAttributes]: PropTypes.objectOf({
    triggerGeneralAttributes: PropTypes.object,
    menuGeneralAttributes: PropTypes.object,
    searchGeneralAttributes: PropTypes.object
  }),
  [tagAttributes]: PropTypes.objectOf({
    triggerTagAttributes: PropTypes.object,
    menuTagAttributes: PropTypes.object,
    searchTagAttributes: PropTypes.object
  })
};
export const defaultProps = {
  color: constantsProps.color.primary,
  variant: constantsProps.variant.outlined,
  size: constantsProps.size.small,
  shape: constantsProps.shape.rectangle,
  [customStyle]: {},
  [tagAttributes]: {},
  [tagGeneralAttributes]: {},
  // selectedOptionsRenderer to be change
  selectedOptionsRenderer: props => {
    const TagConstantProps = Tag.constantProps;
    const {
      onHandleRemove,
      selectedValues,
      selectedItemProps,
      onkeydown,
      disabled
    } = props;

    if (selectedValues.length) {
      return selectedValues.length && selectedValues.map((val, i) => {
        // eslint-disable-next-line eqeqeq
        const tagItemProps = selectedItemProps({
          value: `${val}`,
          active: val == i,
          disabled
        });
        return /*#__PURE__*/React.createElement("span", {
          key: i,
          style: {
            margin: '5px'
          },
          onKeyDown: e => onkeydown(e, val)
        }, /*#__PURE__*/React.createElement(Tag, {
          key: i,
          color: tagItemProps.active ? TagConstantProps.color.danger : TagConstantProps.color.primary,
          variant: TagConstantProps.variant.outlined,
          size: TagConstantProps.size.medium,
          shape: TagConstantProps.shape.rectangle,
          text: `Option ${val}`,
          value: val,
          tabIndex: 0,
          tagItemProps: 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 OptionPropTypes = {
  onHandleSelect: PropTypes.func,
  removeClose: PropTypes.func,
  isIgnore: PropTypes.bool
};
export const OptionAllPropTypes = { ...OptionPropTypes,
  onSelectAll: PropTypes.func
};
export const propsDescription = {};