import React, { useRef, useEffect, useState, useImperativeHandle } from 'react';
import { Animated } from 'react-native';
import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { useField } from '@unform/core';
import { OnlyNumbers } from '../../../services';
import { maskValue } from '../../MaskText/mask.utils';
import { IPropsInput } from '../input.interface';
import {
   Container,
   InputContainer,
   InputStyle,
   ViewPassword,
   TitleText,
   Prefix,
   Suffix,
   TextError,
} from './Input.style';
import { IPropsInputPure } from './InputPure.interface';

export const InputPure = function InputPure(props: IPropsInputPure): any {
   
   const {
      title,
      textRight = false,
      textCenter = false,
      prefix,
      suffix,
      loading = false,
      error = false,
      defaultValueInput = '',
      inputRef = '',
      hidePassword,
      value,
      setValue,
      focus,
      setFocus,
      clearError,
      as = InputPure,
      setHidePassword,
      // Masks
      number = false,
      password = false,
      ...rest
   } = props;

   //
   const forceShowTitle = false;
   const [hasText, setHasText] = useState(defaultValueInput != '');
   const animateTitle = useRef(new Animated.Value(forceShowTitle || defaultValueInput != '' ? 1 : 0)).current;

   useEffect(() => {
      if (!forceShowTitle) {
         if (focus || hasText) {
            Animated.timing(animateTitle, {
               toValue: 1,
               duration: 150,
               useNativeDriver: true,
            }).start();
         } else if (!hasText) {
            Animated.timing(animateTitle, {
               toValue: 0,
               duration: 150,
               useNativeDriver: true,
            }).start();
         }
      }
   }, [focus, hasText]);

   return (
      <>
         {title && <TitleText>{title}</TitleText>}

         <InputContainer focus={focus} error={!!error}>
            {prefix && <Prefix>{prefix}</Prefix>}
            <InputStyle
               ref={inputRef}
               keyboardAppearance="dark"
               defaultValue={defaultValueInput}
               keyboardType={number ? 'numeric' : 'default'}
               secureTextEntry={password && hidePassword}
               onChangeText={(_value: string) => {
                  setHasText(!!_value);
                  if (inputRef.current) {
                     inputRef.current.value = maskValue(_value, props);
                  }
                  setValue(maskValue(_value, props));
                  clearError();
               }}
               onFocus={() => setFocus(true)}
               onBlur={() => setFocus(false)}
               prefix={!!prefix}
               suffix={!!suffix}
               textRight={textRight}
               textCenter={textCenter}
               value={value}
               {...rest}
            />
            {suffix && <Suffix>{suffix}</Suffix>}
         </InputContainer>

         {password && <ViewPasswordToggle hidePassword={hidePassword} setHidePassword={setHidePassword} />}

         {!!error && <TextError testID="input-error">{error}</TextError>}
      </>
   );
};

function ViewPasswordToggle({ hidePassword, setHidePassword }): JSX.Element {
   return (
      <ViewPassword activeOpacity={0.8} onPress={() => setHidePassword(!hidePassword)}>
         {hidePassword && <FontAwesomeIcon icon={faEyeSlash} size={20} />}
         {!hidePassword && <FontAwesomeIcon icon={faEye} size={20} />}
      </ViewPassword>
   );
}
