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

export default {

  
  tagName:PropTypes.string,
  children:PropTypes.node.isRequired,
  direction:PropTypes.oneOf([
    constantProps.direction.row,
    constantProps.direction.rowReverse,
    constantProps.direction.column,
    constantProps.direction.columnReverse
  ]),
  align:PropTypes.oneOf([
    constantProps.align.horizontal,
    constantProps.align.vertical,
    constantProps.align.both,
    constantProps.align.top,
    constantProps.align.bottom,
    constantProps.align.baseline
  ]),
  gap:PropTypes.oneOf([
    constantProps.gap.xSmall,
    constantProps.gap.small,
    constantProps.gap.medium,
    constantProps.gap.large,
    constantProps.gap.none
  ]),
  seperator:PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.node
  ]),
  seperatorTagName:PropTypes.string,
  disabled:PropTypes.bool,

  ...automationProps,
  ...GroupAriaProps,
  ...customClassProps,
  ...tagAttributeProps
}

export const defaultProps = {
  tagName:"span",
  tagAttributeProps : {},

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

export const propsDescription={
  
  tagName:'This defines the component to render in which tag',
  children:'This defines the children render to the component',
  direction:'This defines the direction of component to align the children',
  align:'This defines the alignment of children supplied to the component',
  gap:'This defines the spacing between the child elements',
  disabled: 'this defines the disabled option to the child component',
  seperator:'This defines the Seperator which needs to seperate the component',
  seperatorTagName: 'This defines the Seperator to render in certain tag according to the rules of the page',

  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 Aria label to the component',
  role:'This defines the role of the component'
}