import React from 'react';
import './text-area.css';

type Props = {
    label?: string,
    placeholder?: string,
    id:string,
    name: string,
    disable?: boolean,
    readonly?: boolean,
    size?: 'default' | 'small' | 'medium' | 'large',
    rows: number,
    fixedSize: boolean,
    helperText?: string,
    error?: boolean,
    errorMessage?: string,
    borderRadious?: 'small' | 'medium' | 'large',
    variant: 'default' |'primary' | 'secondary',
    handleChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
}

const TextArea = (props:Props) => {
    const {label, placeholder,id, name, disable, readonly, size,helperText,error,errorMessage,variant,borderRadious, rows, fixedSize, handleChange} = props;
    const style:any = {
        resize: fixedSize ? 'none' : 'vertical'
    }
  return (
   <>
    <div className={`form-group ${error ? 'error' : ''} form-${size} ${variant ? `background-${variant}` : ''} ${borderRadious ? `rounded-${borderRadious}` : ''}`}>
          <label className='control-label'>{label}</label>
          <div className='input-group'>
            <textarea
                id={id}
                name={name}
                style={style}
                className={`textarea-form-control textarea-control-${size}`}
                disabled={disable}
                readOnly={readonly}
                placeholder={placeholder}
                rows={rows ? rows : 3}
                onChange={handleChange}
            ></textarea>
          </div>
          {(error && errorMessage) && <p className='error-text'>{errorMessage}</p>}
          {(!error && helperText) && <p className='helper-text'>{helperText}</p>}
    </div>
   </>
  )
}

export default TextArea;