import { StyleSheet, Text, View } from 'react-native'
import React, { useContext, useState } from 'react'
import { ThemeContext } from '../../../context/theme.context'
import { TextInput } from 'react-native-paper'
import colors from '../../../constants/colors'
import { horizontalScale, verticalScale } from '../../../constants/metrics'
import fonts from '../../../constants/fonts'

const FormTextInput = props => {
    const {
        placeholder,
        inputContainerStyle,
        inputStyle,
        value,
        label,
        type,
        multiline,
    } = props

    const theme = useContext(ThemeContext)
    const currentTheme = theme.state.theme

    const [inputValue, setInputValue] = useState(value)
    let isSecureTextType = false
    let renderType = () => null
    switch (type) {
        case "password":
            isSecureTextType = true
            break;
        case "email":

            break
        case "text":
        default:
            break;
    }

    const styles = StyleSheet.create(
        {
            labelText: {
                color: colors().recessive,
                fontFamily: fonts.type.medium
            },
            inputStyle: {
                paddingVertical: verticalScale(4),
                // paddingHorizontal: horizontalScale(4)
                height: multiline ? verticalScale(96) : null
            },
            outlineStyle: {
                borderColor: colors().lightGray,

            },
            contentStyle: {
                fontFamily: fonts.type.medium,
               
            },
            activeOutlineColor: { borderColor: colors().lightGray },
            outlineColor: colors().lightGray,
            activeUnderlineColor: colors().black,
            underlineColor: colors().black,
            cursorColor: colors().primaryColor
        })

    return (
        <View style={inputContainerStyle}>
            {label ? <Text style={styles.labelText}>{label}</Text> : <></>}
            <TextInput
                editable
                mode='outlined'
                placeholder={placeholder ?? ''}
                placeholderTextColor={colors().grayShade_300}
                dense
                style={[styles.inputStyle,inputStyle]}
                outlineStyle={styles.outlineStyle}
                contentStyle={styles.contentStyle}
                cursorColor={currentTheme === 'light' ? colors().secondaryColor : colors().white}
                onChangeText={(text) => {
                    if (text.length > 0) {
                        setInputValue(text)
                    } else {
                        setInputValue("")
                    }
                }}
                multiline={multiline}
                onSubmitEditing={null}
            // onChangeText={text => onChangeText(text)}
            />
        </View>
    )
}

export default FormTextInput

