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

export default {
    children: PropTypes.node,
    tagName: PropTypes.string,
    columnGap: PropTypes.oneOf([
      gridConstants.columnGap.none,
      gridConstants.columnGap.xSmall,
      gridConstants.columnGap.small,
      gridConstants.columnGap.medium,
      gridConstants.columnGap.large,
      gridConstants.columnGap.xLarge
    ]),
    rowGap: PropTypes.oneOf([
        gridConstants.rowGap.none,
        gridConstants.rowGap.xSmall,
        gridConstants.rowGap.small,
        gridConstants.rowGap.medium,
        gridConstants.rowGap.large,
        gridConstants.rowGap.xLarge
      ]),
    align: PropTypes.oneOf([
      gridConstants.align.vertical,
      gridConstants.align.horizontal,
      gridConstants.align.both,
      gridConstants.align.top,
      gridConstants.align.bottom,
      gridConstants.align.baseline
      
    ]),
    justifyContent: PropTypes.oneOf([
        gridConstants.justifyContent.start, 
        gridConstants.justifyContent.end, 
        gridConstants.justifyContent.center, 
        gridConstants.justifyContent.around, 
        gridConstants.justifyContent.between
    ]),
    isInlineGrid: PropTypes.bool,


    ...automationProps,
    ...customClassProps,
    ...tagAttributeProps
};

export const defaultProps={
    tagName: 'div',
    tagAttributeProps : {},

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

export const propTypesDescription={
  wrap: "this defines the wrap the children are not",
  isInlineGrid: "This defines the the children is inline element",
  justifyContent: "This defines the justify properties of the component",
  rowGap: "this defines the gap between rows of the component",
  columnGap: "this defines the gap between columns of the component",
  tagname: "this defines the tagname that the user to render the component",
  children: "This defines the children element in the component",
  basis: "this defines the basis property of the element",
  align: "this defines the align property of the element",
}