import React, { ChangeEvent, forwardRef, TextareaHTMLAttributes } from 'react';
import classNames from 'classnames';

export interface TextAreaProps
  extends Omit<TextareaHTMLAttributes<HTMLElement>, 'ref'> {
  disabled?: boolean;
  onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
  className?: string;
  rows?: React.HTMLProps<HTMLTextAreaElement>['rows'];
  innerRef?: React.RefObject<HTMLTextAreaElement> | null;
}

export const Textarea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
  (props, ref) => {
    const { disabled, innerRef, className, style, ...restProps } = props;
    const cnames = classNames('paypay-text-area', className, {
      'is-disabled': disabled,
    });
    let textareaRef = props.innerRef || React.createRef<HTMLTextAreaElement>();
    return (
      <textarea
        className={cnames}
        disabled={disabled}
        ref={textareaRef}
        {...restProps}
      ></textarea>
    );
  }
);

export default Textarea;