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 selectAriaProps from './Select.ariaPropTypes';
import automationProps, { automationPropsName } from '../../propTypes/automation.propTypes';
import defaultCustomIds from './Select.customIds';
import selectConstants from './Select.constantProps';
export const commonSelectProps = {
  name: PropTypes.string,
  selectedValue: PropTypes.string,
  id: PropTypes.string,
  children: PropTypes.node,
  isPopupOpen: PropTypes.bool,
  renderSelectedValue: PropTypes.func,
  onGetNextOptions: 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]),
  active: PropTypes.bool,
  hovered: PropTypes.bool,
  disabled: PropTypes.bool,
  readonly: PropTypes.bool,
  required: PropTypes.bool,
  autoFocus: PropTypes.bool,
  focusClass: PropTypes.string,
  // startIcon : PropTypes.any,
  // endIcon : PropTypes.any, Discuss icon handling..
  onClick: PropTypes.func,
  onFocus: PropTypes.func,
  onBlur: PropTypes.func,
  onChange: PropTypes.func,
  onMouseUp: PropTypes.func,
  onMouseDown: PropTypes.func,
  ...selectAriaProps,
  ...customStyleProps,
  ...automationProps
};
export default { ...commonSelectProps,
  [tagAttributes]: PropTypes.objectOf({
    triggerTagAttributes: PropTypes.object,
    menuTagAttributes: PropTypes.object
  }),
  [tagGeneralAttributes]: PropTypes.objectOf({
    triggerGeneralAttributes: PropTypes.object,
    menuGeneralAttributes: PropTypes.object
  }) //color
  //placeholder : PropTypes.string,

};
export const defaultProps = {
  size: selectConstants.size.medium,
  variant: selectConstants.variant.flushed,
  color: selectConstants.color.secondary,
  [automationPropsName]: defaultCustomIds,
  [customStyle]: {},
  [tagAttributes]: {},
  [tagGeneralAttributes]: {}
};
export const propsDescription = {
  children: 'This defines the Children supplied to the component',
  id: 'this defines the id supplied to the component',
  icon: 'This defines the icon 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",
  selectedValue: 'This defines the Selected option of the component',
  // onHandleRemove: "This defines the function to remove all the selected options",
  size: 'This defines the size of select',
  shape: 'This defines the shape of select',
  variant: 'This defines the structural view of select',
  color: 'This defines the color of select',
  customStyle: 'This defines the style that are used by the user specifically',
  active: 'This defines the active state',
  hovered: 'This defines the hovered state',
  disabled: 'This defines the disabled state',
  readonly: 'This defines the readonly state',
  required: 'This defines the required state',
  autoFocus: 'This defines the autofocus state',
  focusClass: 'This defines the classname that applies when the element is focused',
  emptyState: '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
  rootElementProps: 'This defines the a11y property of the component',
  menuProps: 'This defines the a11y property of the component',
  onClick: 'This defines the onClick function supplied to the component',
  onFocus: 'This defines the onFocus function supplied to the component',
  onBlur: 'This defines the onBlur function supplied to the component',
  onChange: 'This defines the onChange function supplied to the component',
  onMouseUp: 'This defines the onMouseUp function supplied to the component',
  onMouseDown: 'This defines the onMousedown function supplied to the component',
  onscroll: 'This defines the onScroll function supplied to the component',
  tagAttributes: 'This defines the props that the user want to use defined & limited customAttributes (on*, data-*) in the button',
  tagGeneralAttributes: 'This defines the props that the user want to use seet of limited customAttributes in the button'
};