import PropTypes from "prop-types";
import tagGeneralAttributeProps, { tagGeneralAttributes } from "@zohodesk/utils/es/props/tagGeneralAttributeProps";
import tagAttributeProps, { tagAttributes } from "@zohodesk/utils/es/props/tagAttributeProps";
import customStyleProps, { customStyle } from "@zohodesk/utils/src/props/customStyleProps";
import { sizeList, colorList } from "@zohodesk/utils/es/constantProps";
import { getSizeProps, getColorProps } from "@zohodesk/utils/es/props/uiProps";
import ListItemAriaProps from "./ListItem.ariaPropTypes";
import automationProps, { automationPropsName } from "../../propTypes/automation.propTypes";
import defaultCustomIds from "./ListItem.customIds";
import ListItemSkeleton from "./ListItem.skeleton";
export default { ...getSizeProps([sizeList.small, sizeList.large, sizeList.medium]),
  ...getColorProps([colorList.primary, colorList.secondary]),
  highLight: PropTypes.bool,
  active: PropTypes.bool,
  value: PropTypes.string,
  disabled: PropTypes.bool,
  onClick: PropTypes.func,
  menuItemProps: PropTypes.func.isRequired,
  lhs: PropTypes.node,
  rhs: PropTypes.node,
  children: PropTypes.node,
  text: PropTypes.string,
  ...automationProps,
  ...ListItemAriaProps,
  ...customStyleProps,
  ...tagGeneralAttributeProps,
  ...tagAttributeProps
};
export const defaultProps = {
  color: 'color_primary',
  [automationPropsName]: defaultCustomIds,
  [customStyle]: {},
  [tagGeneralAttributes]: {},
  [tagAttributes]: {},
  renderComponent: ListItemSkeleton
};
export const propsDescription = {
  size: "This defines the size of element",
  value: "This defines the value of the element",
  variant: "This defines the structural view of element",
  customId: "This defines the dataId that are used by automation purpose",
  onClick: "This defines the onClick action",
  active: "This defines the active state",
  highlight: "This defines the highlight state",
  disabled: "This defines the disabled state",
  lhs: "This defines the Lhs side of the element",
  rhs: "This defines the Lhs side of the element",
  text: "This defines the text that is show the message",
  children: "This defines the children that is show the listitem",
  href: "This defaines the link supplied to the element",
  menuItemProps: "This defines the props that are required for keyboard navigation",
  ariaLabel: "This defines the label of the element",
  role: "This defines the role of element",
  tagGeneralAttributeProps: "This defines the props that the user want to show in the general HTML attributes listitem",
  tagAttributes: "This defines the props that the user want to show in the tags listitem",
  customStyle: "This defines the classname that are used by the user specifically"
};
export const ListSectionPropTypes = {
  children: PropTypes.node,
  title: PropTypes.string,
  ...automationProps,
  ...ListItemAriaProps,
  ...customStyleProps,
  ...tagGeneralAttributeProps,
  ...tagAttributeProps
};
export const defaultListSectionProps = {
  [automationPropsName]: defaultCustomIds,
  [customStyle]: {},
  [tagGeneralAttributes]: {},
  [tagAttributes]: {}
};
export const listSectionPropsDescription = {
  title: "This defines the text that is show the message",
  children: "This defines the children that is show the listsection",
  ariaLabel: "This defines the label of the element",
  role: "This defines the role of element",
  tagGeneralAttributeProps: "This defines the props that the user want to show in the general HTML attributes listsection",
  tagAttributes: "This defines the props that the user want to show in the tags listsection",
  customStyle: "This defines the classname that are used by the user specifically"
};
export const ListBoxPropTypes = {
  children: PropTypes.node,
  menuProps: PropTypes.func,
  rootElementProps: PropTypes.obj,
  ...automationProps,
  ...ListItemAriaProps,
  ...customStyleProps,
  ...tagGeneralAttributeProps,
  ...tagAttributeProps
};
export const defaultListBoxProps = {
  needAccess: true,
  [automationPropsName]: defaultCustomIds,
  [customStyle]: {},
  [tagGeneralAttributes]: {},
  [tagAttributes]: {}
};
export const listBoxPropsDescription = {
  children: "This defines the children that is show the listbox",
  menuProps: "This defines the props that are required for keyboard navigation",
  rootElementProps: "This defines the root element that is responsible for the keyboard navigation",
  ariaLabel: "This defines the label of the element",
  role: "This defines the role of element",
  tagGeneralAttributeProps: "This defines the props that the user want to show in the general HTML attributes listsection",
  tagAttributes: "This defines the props that the user want to show in the tags listsection",
  customStyle: "This defines the classname that are used by the user specifically"
};