import React, { useRef, InputHTMLAttributes, useImperativeHandle, useState, TextareaHTMLAttributes } from 'react';
import TextareaAutosize from 'react-textarea-autosize';
import classNames from 'classnames';
import { LoaderIcon } from '../LoaderIcon';
import { maskValue } from '../MaskText/mask.utils';
import { FormStyle } from '../styles';
import Style from './Textarea.style';
import { TextareaCore } from './TextareaCore';
import { IPropsTextareaProps } from './TextareaCore.interface';

export interface ITextareaProps extends IPropsTextareaProps {
   defaultValue?: string;
}

export const TextareaPure = React.forwardRef<TextareaHTMLAttributes<any>, ITextareaProps & HTMLTextAreaElement & any>(
   function TextareaPure(props, inputRef: any) {
      const {
         title,
         error,
         textRight,
         textCenter,
         defaultValue,
         loading,
         prefix,
         onEnter,
         password,
         value: valueInput,
         suffix,
         withoutDotNumber,
         as /**/,
         ...rest
      } = props;
      // ref component
      const ref = useRef<any>();
      useImperativeHandle(inputRef, () => ref.current, []);

      // focus
      const [focus, setFocus] = useState(false);

      // mask in value
      let value;
      if (valueInput != undefined) {
         value = maskValue(props.value, props.mask, props as any);
      }

      // onEnter
      // useEventListener('keydown.enter', () => onEnter && onEnter(ref.current.value), inputRef);
      const [hidePassword, setHidePassword] = useState(true);

      // class
      const className = ['input-border'];
      if (textRight) className.push('text-right');
      if (rest?.type == 'hidden') className.push('input-hidden');
      if (error) className.push('has-error');
      if (focus) className.push('focus');

      return (
         <FormStyle className={classNames('textarea-container', rest?.disabled && 'disabled')}>
            <Style>
               {title && <div className={`input-title ${focus && 'focus'}`}>{title}</div>}

               <div className={className.join(' ')}>
                  {prefix && <div className="prefix">{prefix}</div>}
                  <TextareaAutosize
                     ref={ref as any}
                     defaultValue={value ? '' : maskValue(defaultValue, props.mask, props as any)}
                     type={hidePassword && password ? 'password' : 'text'}
                     minRows={4}
                     maxRows={4}
                     {...(rest as any)}
                     value={value}
                     onBlur={(ev) => {
                        if (rest.onBlur) rest.onBlur(ev);
                        setFocus(false);
                     }}
                     onFocus={(ev) => {
                        if (rest.onFocus) rest.onFocus(ev);
                        setFocus(true);
                     }}
                     onChange={(evt) => {
                        ref.current.value = (evt.target as any).value;
                        if (rest.onChange) rest.onChange((evt.target as any).value, evt);
                     }}
                     onInput={(evt) => {
                        ref.current.value = (evt.target as any).value;
                        if (rest.onInput) rest.onInput((evt.target as any).value, evt);
                     }}
                     className={`${textCenter && ' text-center'}`}
                  />
                  {loading && (
                     <div className="suffix suffix-loading">
                        <LoaderIcon size={18} />
                     </div>
                  )}
                  {suffix && <div className="suffix">{suffix}</div>}
               </div>

               {error && (
                  <div className="error-input" data-testid="input-error">
                     {error}
                  </div>
               )}
            </Style>
         </FormStyle>
      );
   },
);

export const Textarea = React.forwardRef<InputHTMLAttributes<any>, ITextareaProps>(function Checkbox(
   props,
   inputRef: any,
) {
   const ref = useRef<any>();

   useImperativeHandle(inputRef, () => ref.current, []);

   return <TextareaCore {...props} ref={ref} as={TextareaPure} />;
});
