
import React from "react";
import style from "./Textarea.module.css";
import propTypes, {defaultProps,propsDescription} from "./Textarea.propTypes";
import constantProps from "./Textarea.constantProps";
import getCompliedClassName from "../../utils/getCompliedClassName";
import getCompliedCustomId from "../../utils/getCompliedCustomId";

export default function Textarea(props) {
    let {
        id,
        name,
        placeholder,
        value ,
        required,
        readOnly,
        rows,
        cols,

        defaultValue,

        resize,

        autoFocus,
        disabled,
        hovered,
    
        minLength,
        maxLength,
    
        variant,
        color,
        animateOnFocus,
        size,
    
        onBlur,
        onChange ,
        onClick ,
        onFocus,
        onKeyDown,
        onKeyUp,
        onKeyPress,

        getRef,

        role ,
        tabIndex ,
        ariaLabel ,
        ariaLabelledby,
        ariaPlaceholder,
        ariaRequired,
        ariaReadonly,
        ariaDisabled,

        customClassName,

        customId ,
        customIdPrefix ,
        customIdSuffix,

        tagAttributeProps
    } = props;

    
    let className = getCompliedClassName(
      customClassName,
      {
        [style.base]: true,
        [style[size]]: !!size,
        [style[variant]]: !!variant,
        [style[color]]: !!color,
        [style[resize]]: !!resize,
     
        [style.hovered]: !!hovered,
        [style.disabled]: !!disabled,
        [style.readOnly]: !!readOnly,
        [style.animateOnFocus]: !!animateOnFocus
      },
      {
        [customClassName.base]: !!customClassName.base,
        [customClassName.color]: !!customClassName.color,
        [customClassName.size]: !!customClassName.size,
        [customClassName.variant]: !!customClassName.variant,
       
        [customClassName.hovered]: !!customClassName.hovered,
        [customClassName.disabled]: !!customClassName.disabled,
        [customClassName.readonly]: !!customClassName.readonly,
        [customClassName.animateOnFocus]: !!customClassName.animateOnFocus
      }
    );

    let defaultProperties = {
      required : required,
      autoFocus : autoFocus,
      readOnly : readOnly,
      minLength : minLength,
      maxLength : maxLength
    };  
    
    return (
      <textarea
        className={className}
        id={id}
        name={name}
        placeholder={placeholder}
        value={value}
        rows={rows}
        cols={cols}

        defaultValue ={defaultValue}
        
        data-id={getCompliedCustomId(props, customId.textArea)}

        ref={getRef}
       
        role={role}
        tabIndex={tabIndex}
        aria-label={ariaLabel}
        aria-labelledby={ariaLabelledby}
        aria-placeholder ={ariaPlaceholder} 
        aria-required ={ariaRequired}
        aria-readonly ={ariaReadonly}
        aria-disabled={ariaDisabled}

        onBlur={onBlur}
        onChange ={onChange}
        onClick={onClick}
        onFocus={onFocus}
        onKeyDown={onKeyDown}
        onKeyUp={onKeyUp}
        onKeyPress={onKeyPress}


        {...defaultProperties}
        {...tagAttributeProps}
      />
    );
  }

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