import PropTypes from "prop-types";
import buttonAriaProps from "./Button.ariaPropTypes";
import tagAttributeProps, { tagAttributePropsName } from "../../propTypes/htmlAttributes.propTypes"
import automationProps, { automationPropsName } from "../../propTypes/automation.propTypes";
import customClassProps, { customClassPropName } from "../../propTypes/customClassName.propTypes";
import defaultCustomIds from "./Button.customIds"
import constantProps from "./Button.constantProps";

export default {
  text: PropTypes.string,
  children: PropTypes.any,
  textEllipsis: PropTypes.bool,
  focusClass: PropTypes.string,
  size: PropTypes.oneOf([
    constantProps.size.small,
    constantProps.size.medium,
    constantProps.size.large,
    constantProps.size.xLarge,
    constantProps.size.stretch
  ]),
  shape: PropTypes.oneOf([
    constantProps.shape.square,
    constantProps.shape.oval,
    constantProps.shape.circle,
    constantProps.shape.default
  ]),
  color: PropTypes.oneOf([
    constantProps.color.primary,
    constantProps.color.secondary,
    constantProps.color.success,
    constantProps.color.danger
  ]),
  variant: PropTypes.oneOf([
    constantProps.variant.contained,
    constantProps.variant.outlined,
    constantProps.variant.text
  ]),

  active: PropTypes.bool,
  hovered: PropTypes.bool,
  disabled: PropTypes.bool,

  onClick: PropTypes.func,
  renderComponent: PropTypes.func,

  startIcon: PropTypes.any,
  endIcon: PropTypes.any,

  ...automationProps,
  ...buttonAriaProps,
  ...customClassProps,
  ...tagAttributeProps
}

export const defaultProps = {
  textEllipsis: false,

  size: constantProps.size.medium,
  shape: constantProps.shape.default,
  variant: constantProps.variant.contained,
  //color: constantProps.color.primary,

  // active : false,
  // hovered : false,
  // disabled : false,
  // autoFocus : false,

  tagAttributeProps: {},

  [automationPropsName]: defaultCustomIds,
  [customClassPropName]: {},
  [tagAttributePropsName]: {}
}

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",

  tagAttributeProps: "This defines the props that the user want to show in the tags button",

  customClassName: "This defines the classname 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 "
}