import { Input } from '@rneui/themed';
import React, { createRef, FC, useEffect } from 'react';
import type { IShaInputProps } from './interface';
import styles from './styles';

const ShaInput: FC<IShaInputProps> = (props) => {
  const inputRef = createRef<any>();

  useEffect(() => {
    if (props.error && props.shakeOnError !== undefined && props.shakeOnError) {
      inputRef.current.shake();
    }
  }, [props.error]);

  return (
    <Input
      {...props}
      ref={inputRef}
      disabled={props.disabled}
      label={props.label}
      onBlur={props.onBlur}
      onChange={props.onChange}
      onChangeText={props.onChangeText}
      labelStyle={[
        styles.label,
        props.labelStyle,
        { display: props.label ? 'flex' : 'none' },
      ]}
      inputContainerStyle={[
        { borderBottomWidth: 0 },
        props.inputContainerStyle,
      ]}
      inputStyle={[styles.input, props.inputStyle]}
      leftIcon={props.leftIcon}
      rightIcon={props.rightIcon}
      errorStyle={styles.error}
      secureTextEntry={props.secureTextEntry}
      placeholder={props.placeholder}
      underlineColorAndroid={'transparent'}
      errorMessage={props.error}
    />
  );
};

export default ShaInput;