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

/* eslint-disable jsx-a11y/click-events-have-key-events */
import React from 'react';
import PropTypes from 'prop-types';
import customStyleProps, { customStyle } from '@zohodesk/utils/es/props/customStyleProps';
import { tagAttributes } from '@zohodesk/utils/es/props/tagAttributeProps';
import { tagGeneralAttributes } from '@zohodesk/utils/es/props/tagGeneralAttributeProps';
import { variantList, shapeList, sizeList, colorList } from '@zohodesk/utils/es/constantProps';
import { getShapeProps, getColorProps, getVariantProps, getSizeProps } from '@zohodesk/utils/es/props/uiProps';
import constantsProps from './MultiSelect.constantProps';
import Tag from '../tag/Tag';
import TagConstantProps from '../tag/Tag.constantProps';

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

Icon.propTypes = {
  onClick: PropTypes.func
};
export const commonMultiSelectProps = {
  children: PropTypes.node,
  isPopupOpen: PropTypes.bool,
  togglePopup: PropTypes.func,
  selectedOptionsRenderer: PropTypes.func,
  selectedValues: PropTypes.array,
  onHandleRemove: PropTypes.func,
  ...getVariantProps([variantList.contained, variantList.outlined, variantList.plain, variantList.flushed]),
  ...getSizeProps([sizeList.small, sizeList.medium, sizeList.large], ['stretch']),
  ...getColorProps([colorList.primary, colorList.secondary, colorList.danger, colorList.success]),
  ...getShapeProps([shapeList.square, shapeList.oval]),
  // color: PropTypes.string,
  // variant: PropTypes.string,
  // size: PropTypes.string,
  // shape: PropTypes.string,
  id: PropTypes.string,
  active: PropTypes.bool,
  hovered: PropTypes.bool,
  disabled: PropTypes.bool,
  readonly: PropTypes.bool,
  onkeydown: PropTypes.func,
  placeholder: PropTypes.string,
  emptyStateComponent: PropTypes.func,
  getFilteredOptionsData: PropTypes.func,
  isLoadingState: PropTypes.bool,
  loadingStateComponent: PropTypes.func,
  isEmptyState: PropTypes.bool,
  ...customStyleProps,
  valueProps: PropTypes.object,
  // for a11y
  triggerProps: PropTypes.object,
  // for a11y
  tagAttributeProps: PropTypes.object,
  selectedItemProps: PropTypes.func,
  rootElementProps: PropTypes.object,
  menuProps: PropTypes.object
};
export default { ...commonMultiSelectProps,
  [tagAttributes]: PropTypes.shape({
    triggerTagAttributes: PropTypes.object,
    menuTagAttributes: PropTypes.object
  }),
  [tagGeneralAttributes]: PropTypes.shape({
    triggerGeneralAttributes: PropTypes.object,
    menuGeneralAttributes: PropTypes.object
  })
};
export const defaultProps = {
  color: constantsProps.color.primary,
  variant: constantsProps.variant.outlined,
  size: constantsProps.size.medium,
  shape: constantsProps.shape.rectangle,
  [customStyle]: {},
  [tagAttributes]: {},
  [tagGeneralAttributes]: {},
  selectedOptionsRenderer: props => {
    const {
      color,
      variant,
      size,
      shape,
      disabled,
      onHandleRemove,
      selectedValues,
      selectedItemProps,
      onkeydown
    } = props;

    if (selectedValues.length) {
      return /*#__PURE__*/React.createElement("div", null, selectedValues.length && selectedValues.map((val, i) => {
        const tagItemProps = selectedItemProps({
          value: `${val}`,
          active: val == i,
          disabled
        });
        return /*#__PURE__*/React.createElement("span", {
          style: {
            margin: '5px'
          },
          key: i,
          onKeyDown: e => onkeydown(e, val)
        }, /*#__PURE__*/React.createElement(Tag, {
          color: TagConstantProps.color[color],
          variant: TagConstantProps.variant[variant],
          size: TagConstantProps.size[size],
          shape: TagConstantProps.shape[shape],
          text: val,
          tabIndex: 0,
          value: val,
          tagItemProps: tagItemProps,
          endIcon: /*#__PURE__*/React.createElement(Icon, {
            onClick: () => {
              onHandleRemove(val);
            }
          })
        }));
      }));
    }

    return null;
  }
};
export const propsDescription = {
  children: 'This defines the Children supplied to the component',
  id: 'this defines the id supplied to the component',
  onkeydown: 'This defines the keydown supplied to the component',
  placeholder: 'This defines the Placeholder supplied to the component',
  isPopupOpen: 'This defines whether the popup is open or not',
  togglePopup: 'This defines the toggle function of the popup',
  selectedOptionsRenderer: 'This defines the how the Selected options will be rendered',
  selectedValues: 'This defines the Selected options of the component',
  onHandleRemove: 'This defines the function to remove all the selected options',
  size: 'This defines the size of multiselect',
  shape: 'This defines the shape of multiselect',
  variant: 'This defines the structural view of multiselect',
  color: 'This defines the color of multiselect',
  active: 'This defines the active state',
  hovered: 'This defines the hovered state',
  disabled: 'This defines the disabled state',
  readonly: 'This defines the readonly state',
  emptyStateComponent: 'This defines the empty state of component',
  valueProps: 'This defines the a11y property of the component',
  // for a11y
  triggerProps: 'This defines the a11y property of the component',
  // for a11y
  tagAttributeProps: 'This defines the a11y property of the component',
  selectedItemProps: 'This defines the a11y property of the component',
  rootElementProps: 'This defines the a11y property of the component',
  menuProps: 'This defines the a11y property of the component',
  getFilteredOptionsData: 'This defines the filtered options of component',
  isLoadingState: 'This defines the loading state is active or not',
  loadingStateComponent: 'This defines the loading state of component',
  isEmptyState: 'This defines the emprty state is active or not'
};