import PropTypes from 'prop-types';
import customStyleProps, { customStyle } from '@zohodesk/utils/es/props/customStyleProps';
import tagAttributeProps, { tagAttributes } from '@zohodesk/utils/es/props/tagAttributeProps';
import tagGeneralAttributeProps, { tagGeneralAttributes } from '@zohodesk/utils/es/props/tagGeneralAttributeProps';
import { getVariantProps, getColorProps, getShapeProps, getSizeProps } from '@zohodesk/utils/es/props/uiProps';
import { variantList, colorList, shapeList, sizes } from '@zohodesk/utils/es/constantProps/index';
import buttonAriaProps from './Button.ariaPropTypes';
import automationProps, { automationPropsName } from '../../../propTypes/automation.propTypes';
import defaultCustomIds from './Button.customIds';
import constantProps from './Button.constantProps';
export default { // ui props
  ...getVariantProps([variantList.contained, variantList.outlined, variantList.plain]),
  ...getSizeProps([...sizes], ['stretch']),
  ...getColorProps([colorList.primary, colorList.secondary, colorList.danger, colorList.success]),
  ...getShapeProps([shapeList.square, shapeList.circle, shapeList.oval]),
  text: PropTypes.string,
  children: PropTypes.any,
  textEllipsis: PropTypes.bool,
  focusClass: PropTypes.string,
  // state related props
  active: PropTypes.bool,
  hovered: PropTypes.bool,
  disabled: PropTypes.bool,
  // events props
  onClick: PropTypes.func,
  renderComponent: PropTypes.func,
  // icon support
  startIcon: PropTypes.any,
  endIcon: PropTypes.any,
  // coomon props
  ...automationProps,
  ...buttonAriaProps,
  ...customStyleProps,
  ...tagAttributeProps,
  ...tagGeneralAttributeProps
};
export const defaultProps = {
  textEllipsis: false,
  size: constantProps.size.medium,
  // shape: constantProps.shape.rectangle,
  variant: variantList.outlined,
  color: constantProps.color.primary,
  [automationPropsName]: defaultCustomIds,
  [customStyle]: {},
  [tagAttributes]: {},
  [tagGeneralAttributes]: {}
};
export const propsDescription = {
  text: 'This defines the text that is show the message',
  children: 'This defines the children that is show the button',
  textEllipsis: 'This defines the text overflow handling in it',
  size: 'This defines the size of button',
  shape: 'This defines the shape of button',
  variant: 'This defines the structural view of button',
  color: 'This defines the color of button',
  active: 'This defines the active state',
  hovered: 'This defines the hovered state',
  disabled: 'This defines the disabled state',
  autoFocus: 'This defines the autofocus state',
  cursor: 'This defines the state of cursor',
  onClick: 'This defines the onClick action',
  startIcon: 'This defines the icon to be placed in the front of button',
  endIcon: 'This defines the icon to be placed in the end of button',
  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',
  customStyle: 'This defines the style that are used by the user specifically',
  customId: 'This defines the dataId that are used by automation purpose',
  customIdPrefix: 'This defines the dataId that are used by automation purpose',
  customIdSuffix: 'This defines the dataId that are used by automation purpose',
  ariaLabel: 'This defines the label of the element',
  role: 'This defines the role of element',
  ariaLabelledby: 'This defines the element labelled by its parent',
  ariaDisabled: 'This defines the element disabled using aria',
  ariaPressed: 'This defines the pressed state of button',
  ariaHasPopup: 'This defines the popup of button',
  ariaExpanded: 'This defines the popup used in button',
  ariaSelected: 'This defines the selected state of button',
  ariaControls: 'This defines the controls action in button',
  focusClass: 'This defines the classname that applies when the element is focused',
  restoreFocus: 'this defines whether the focus has to be restored to it '
};