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

const textAreaPropTypes = {
    id : PropTypes.string,
    name : PropTypes.string,
    placeholder : PropTypes.string,
    value : PropTypes.string,
    required : PropTypes.bool,
    readOnly : PropTypes.bool,
    rows : PropTypes.number,
    cols : PropTypes.number,

    resize : PropTypes.oneOf([
        constantProps.resize.none, 
        constantProps.resize.horizontal, 
        constantProps.resize.vertical, 
        constantProps.resize.both
    ]),

    autoFocus : PropTypes.bool,
    disabled : PropTypes.bool,
    hovered : PropTypes.bool,

    minLength : PropTypes.number,
    maxLength : PropTypes.number,

    color : PropTypes.oneOf([
        constantProps.color.default,
        constantProps.color.primary,
        constantProps.color.danger,
    ]),
    variant : PropTypes.oneOf([
        constantProps.variant.outline,
        constantProps.variant.flushed,
        constantProps.variant.filled,
        constantProps.variant.plain
    ]),
    size : PropTypes.oneOf([
        constantProps.size.small,
        constantProps.size.medium,
        constantProps.size.large,
    ]),

    animateOnFocus : PropTypes.bool,

    onBlur : PropTypes.func,
    onChange : PropTypes.func,
    onClick : PropTypes.func,
    onFocus : PropTypes.func,
    onKeyDown : PropTypes.func,
    onKeyUp : PropTypes.func,
    onkeypress : PropTypes.func,

    getRef : PropTypes.func,

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

export default textAreaPropTypes;
  
export const defaultProps = {
    required : false,
    readOnly : false,
    resize : constantProps.resize.both,
    autoFocus : false,
    disabled : false,
    animateOnFocus : PropTypes.false,
    [automationPropsName]: defaultCustomIds,
    [customClassPropName]: {},
    [tagAttributePropsName]: {}
};
  
  export const propsDescription = {
    id : 'An id attribute to allow the <Textarea> component for accessibility purposes.',
    name : 'The name of the control.',
    placeholder : 'A hint to the user of what can be entered in the control. Carriage returns or line-feeds within the placeholder text must be treated as line breaks when rendering the hint.',
    value : 'Specifies the text area input value. (controlled)',
    required : 'Specifies that a text area is required/must be filled out. If true, the textarea control will be required. This has 2 side effects: - The Textarea will show a required indicator - The form element (e.g, Input) will have `aria-required` set to true.',
    readOnly : 'Specifies that a text area should be read-only. If true, the text area control will be readonly.',
    rows : 'The number of visible text lines for the control.',
    cols : 'The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.',

    defaultValue : 'Use state value in uncontrolled textarea component',

    resize : 'Specifies the resize both the height and width of the element.',
    autoFocus : 'Specifies that a text area should automatically get focus when the page loads.',
    disabled : 'Specifies the text area should be disabled. If true, the form control will be disabled.',

    minLength : 'The minimum number of characters (UTF-16 code units) required that the user should enter.',
    maxLength : "The maximum number of characters (UTF-16 code units) that the user can enter. If this value isn't specified, the user can enter an unlimited number of characters.",

    variant : 'Specifies the variant type of text area like ["outline" | "flushed" | "filled" | "plain" ]',
    animateOnFocus : 'Specifies the visible text height increased in focused time. if true the text height increased',
    color : 'Specifies the variant color of text area like ["default" | "primary", "danger"]',
    size : 'Specifies the visible text height like [small | medium | Large | xLarge]',

    onBlur : 'Event occurs when an object loses focus.',
    onChange : 'Event occurs when the value of an element has been changed.',
    onClick : 'Event occurs when the user clicks on an element.',
    onFocus : 'Event occurs when an element gets focus.',
    onKeyDown : 'Event occurs when the user is pressing a key (on the keyboard).',
    onKeyUp : 'Event occurs when the user releases a key (on the keyboard).',
    onkeypress : 'Event occurs when the user presses a key (on the keyboard).',

    role : 'The role is used to communicate an important and usually time-sensitive message to the user',
    tabIndex : 'Specifies the keyboard tab order of the textarea relative to the other controls on the page.The tabIndex value indicates when the textarea can be focused.',
    ariaLabel : 'Defines a string value that labels an interactive element',
    ariaLabelledby : 'Enables authors to reference other elements on the page to define an accessible name.',
    ariaPlaceholder : 'Represents a hint (word or phrase) to the user about what to enter into the text field',
    ariaRequired : 'Indicates that a value must be provided for the field before it is submitted.',
    ariaReadonly : 'Indicates that the user cannot modify the value of the text field.',
    ariaDisabled : 'Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.'
};

export const textareaControlledPropTypes = {
    defaultValue : PropTypes.string,
    ...textAreaPropTypes
}

export const textareaControlledDescription = {
    defaultValue : 'The default value (uncontrolled).',
    ...propsDescription
}

