import React from 'react';
import {View, Text, TextInput, StyleSheet} from 'react-native';
import { NativeSyntheticEvent } from 'react-native/Libraries/Types/CoreEventTypes';
import { TextInputEndEditingEventData } from 'react-native/Libraries/Components/TextInput/TextInput';

interface InputProps {
  label? : string,
    labelColor?: string,
  outlined? : boolean,
  placeholder?: string, 
  leftIcon?: any, 
  rightIcon?: any, 
  numLines?: number, 
  onChangeHandler?: (text: string)=>void, 
  secure?: boolean, 
  validate?: (e : NativeSyntheticEvent<TextInputEndEditingEventData>)=>void, // ob die line "gecheckt" werden soll
  errorMessage? : any, //error msg 
  errorColor?: string,
  bgColor?: string,
}

function Input({
  label,
    labelColor,
  outlined,
  placeholder,
  leftIcon,
  rightIcon,
  numLines,
  onChangeHandler,
  secure,
  validate,
  errorMessage,
  errorColor,
  bgColor
} : InputProps) {
    const labelStyle = {
        ...styles.label,
        color: labelColor ? labelColor : 'black',
    };
    const containerBorder = outlined ? styles.outlined : styles.standard
    if(numLines == undefined){
      numLines = 1
    }
    return (
        <View style={{padding:10}}>
            <Text style={labelStyle}>{label}</Text>
            <View 
                style={[styles.container, containerBorder, {backgroundColor: bgColor ? bgColor : "white"}]}>
                    <View style={{paddingRight:10}}>{leftIcon}</View>
                
                <TextInput secureTextEntry={secure} placeholder={
                    placeholder ? placeholder : label ? 'Enter ${label}' : ''
                }
                onChangeText={onChangeHandler}
                onEndEditing={validate}
                multiline={numLines > 1}
                numberOfLines={numLines}
                style={{flex: 4}}
                />
                {rightIcon}
            </View>
            <Text style={{color: errorColor? errorColor: "red"}}>{errorMessage}</Text>
        </View>
        
    )
}

const styles = StyleSheet.create({
    label: {
        fontWeight: '500',
    },
    container: {
        padding: 10,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: 'white'
    },
    outlined: {
        borderColor: 'darkgrey',
        borderRadius: 4,
        borderWidth: 1,
    },
    standard: {
        borderBottomColor: 'darkgrey',
        borderBottomWidth: 1,
    },

})

export default Input;