import React from "react";
import TextareaBehaviour, { TextareaControlledBehaviour } from "./Textarea.behaviour";
import TextareaSkeleton from "./Textarea.skeleton";
import componentCategories from "../../docs-utils/componentCategories";
import componentGroups from "../../docs-utils/componentGroups";
import textareaPropTypes, {defaultProps,propsDescription, textareaControlledPropTypes, textareaControlledDescription} from "./Textarea.propTypes";
import constantProps from "./Textarea.constantProps";

export default function Textarea(props){

  return <TextareaBehaviour
    {...props}
    renderComponent={TextareaSkeleton}
  />

}

Textarea.defaultProps=defaultProps;
Textarea.propTypes=textareaPropTypes;
Textarea.constantProps=constantProps;
Textarea.propsDescription=propsDescription;

export function TextareaControlled(props){

  return <TextareaControlledBehaviour
    {...props}
    renderComponent={TextareaSkeleton}
  />

}

TextareaControlled.defaultProps=defaultProps;
TextareaControlled.propTypes=textareaControlledPropTypes;
TextareaControlled.constantProps=constantProps;
TextareaControlled.propsDescription=textareaControlledDescription;


if (__DOCS__) {
  Textarea.docs = {
    componentGroup: componentGroups.Atom,
    folderName: componentCategories.Form
  };
}

// import React from "react";
// import PropTypes from "prop-types";
// import styles from "./Textarea.module.css";
// import componentCategories from "../../docs-utils/componentCategories";
// import componentGroups from "../../docs-utils/componentGroups";

// export default function Textarea(props) {
//   let {
//     size,
//     style,
//     resize,
//     variant,
//     fieldStyle,
//     placeholder,
//     disabled,
//     focusClass,
//     autoFocus
//   } = props;
//   return (
//     <textarea
//       data-aria-focusstyle={focusClass}
//       data-aria-autofocus={autoFocus}
//       placeholder={placeholder}
//       className={
//         styles.textbox +
//         " " +
//         styles[size] +
//         " " +
//         styles[fieldStyle] +
//         " " +
//         styles[variant] +
//         " " +
//         `${disabled ? styles.disabled : null}` +
//         " " +
//         `${resize ? null : styles.resize}`
//       }
//       disabled={disabled}
//     />
//   );
// }

// Textarea.defaultProps = {
//   size: "",
//   variant: "",
//   resize: false,
//   placeholder: "Enter the value",
//   fieldStyle: ""
// };

// if (__DOCS__) {
//   Textarea.docs = {
//     componentGroup: componentGroups.Atom,
//     folderName: componentCategories.Form
//   };
// }
