import React from 'react';
import {View, TextInput, StyleSheet, TextInputProps} from 'react-native';
import * as Animatable from 'react-native-animatable';
import {TAGG_LIGHT_PURPLE} from '../../constants';

interface TaggInputProps extends TextInputProps {
  valid?: boolean;
  invalidWarning?: string;
  attemptedSubmit?: boolean;
}
/**
 * An input component that receives all props a normal TextInput component does. TaggInput components grow to 60% of their parent's width by default, but this can be set using the `width` prop.
 */
const TaggInput = React.forwardRef((props: TaggInputProps, ref: any) => {
  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholderTextColor="#ddd"
        clearButtonMode="while-editing"
        ref={ref}
        {...props}
      />
      {props.attemptedSubmit && !props.valid && (
        <Animatable.Text
          animation="shake"
          duration={500}
          style={styles.warning}>
          {props.invalidWarning}
        </Animatable.Text>
      )}
    </View>
  );
});

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    marginVertical: 11,
  },
  input: {
    width: '100%',
    minWidth: '60%',
    height: 40,
    fontSize: 16,
    fontWeight: '600',
    color: '#fff',
    borderColor: '#fffdfd',
    borderWidth: 2,
    borderRadius: 20,
    paddingLeft: 13,
  },
  warning: {
    fontSize: 14,
    marginTop: 5,
    color: TAGG_LIGHT_PURPLE,
    maxWidth: 350,
    textAlign: 'center',
  },
});

export default TaggInput;