import PropTypes from 'prop-types';
import boxConstants from './Box.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 "./Box.customIds"

export default {
    basis: PropTypes.bool,
    alignSelf: PropTypes.oneOf([
      boxConstants.alignSelf.start,
      boxConstants.alignSelf.end,
      boxConstants.alignSelf.center
    ]),
    column: PropTypes.oneOf([
      boxConstants.column['1'],      
      boxConstants.column['2'],
      boxConstants.column['3'],
      boxConstants.column['4'],
      boxConstants.column['5'],
      boxConstants.column['6'],
      boxConstants.column['7'],
      boxConstants.column['8'],
      boxConstants.column['9'],
      boxConstants.column['10'],
      boxConstants.column['11'],
      boxConstants.column['12']      
    ]),
    getRef: PropTypes.func,
    flexible: PropTypes.bool,
    isFirst: PropTypes.bool,
    isLast: PropTypes.bool,
    shrink: PropTypes.bool,

    autoFocus: PropTypes.bool,
    focusLoop: PropTypes.object,

    children: PropTypes.node,
    isScrollAttribute: PropTypes.bool,
    scroll: PropTypes.oneOf([
      boxConstants.scroll.vertical,
      boxConstants.scroll.horizontal,
      boxConstants.scroll.both,
      boxConstants.scroll.none
    ]),
    tagName: PropTypes.string,

    isContainer: PropTypes.bool,
    spacing: PropTypes.oneOf([
      boxConstants.spacing.none,
      boxConstants.spacing.xSmall,
      boxConstants.spacing.small,
      boxConstants.spacing.medium,
      boxConstants.spacing.large,
      boxConstants.spacing.xLarge
    ]),
    align: PropTypes.oneOf([
      boxConstants.align.vertical,
      boxConstants.align.horizontal,
      boxConstants.align.both,
      boxConstants.align.top,
      boxConstants.align.bottom,
      boxConstants.align.baseline
      
    ]),
    alignContent:PropTypes.oneOf([
      boxConstants.alignContent.start,
      boxConstants.alignContent.end,
      boxConstants.alignContent.center
    ]),
    direction: PropTypes.oneOf([
        boxConstants.direction.row, 
        boxConstants.direction.column, 
        boxConstants.direction.rowReverse, 
        boxConstants.direction.columnReverse
    ]),
    justifyContent: PropTypes.oneOf([
        boxConstants.justifyContent.start, 
        boxConstants.justifyContent.end, 
        boxConstants.justifyContent.center, 
        boxConstants.justifyContent.around, 
        boxConstants.justifyContent.between
    ]),
    isCover: PropTypes.bool,
    isInline: PropTypes.bool,
    wrap: PropTypes.oneOf([
        boxConstants.wrap.wrap,
        boxConstants.wrap.wrapReverse,
        boxConstants.wrap.nowrap
    ]),


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

export const defaultProps={

    isScrollAttribute: false,
    tagName: 'div',
    tagAttributeProps : {},

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

export const propTypesDescription={
  wrap: "this defines the wrap the children are not",
  isInline: "This defines the the children is inline element",
  isCover: "this defines the compoennt to act as cover element",
  justifyContent: "This defines the justify properties of the component",
  spacing: "this defines the spacing of the component",
  align: "this defines the alignment of the component",
  direction:"this defines the direction of alignment",
  tagname: "this defines the tagname that the user to render the component",
  shrink: "This defines the shrink property of the element",
  scroll: "This defines the scroll element of the box",
  isFirst: "this defines the the element to render as first element",
  isLast: "This defines the the element to render as last element",
  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",
  alignContent: "this defines the alignContent property of the element",
  alignSelf:"this defines the alignSelf property of the element",
  column: "this defines the Columns property of the compoent variants",
  flexible: "this defines the element to be flexible",
  autoFocus: "this defines the autoFocus property to focus the children",
  focusLoop: "this function defines the Focused element ",
  isContainer: "this defines the Component to act as container"
}