import { StyleSheet, Text, TextInput as RNTextInput, PixelRatio, View } from 'react-native'
import React from 'react'
import ReactNative from 'react-native'
import { SWIFT_BYTE_COLOURS } from '../../../constants'

interface TextFieldProps {
    label?: string
    icon?: string
    status?: "success" | "warning" | "error"
    statusMessage?: string
    value: string
    onChangeText: (text: string) => void
    placeholder?: string
    style?: ReactNative.StyleProp<ReactNative.TextStyle>
}

export function TextInput(props: TextFieldProps) {

    const baseFontSize = PixelRatio.getFontScale() * 16;

    return (
        <View>
            {props.label &&
                <Text
                    style={{
                        fontWeight: "bold",
                        fontSize: baseFontSize,
                        marginBottom: 5
                    }}
                >{props.label}</Text>}
            <RNTextInput
                {...props}
                style={
                    [
                        {
                            margin:5,
                            borderWidth: 1,
                            paddingLeft: baseFontSize * 2,
                            paddingRight: baseFontSize * 2,
                            paddingTop: baseFontSize,
                            paddingBottom: baseFontSize,
                            borderColor:
                                props.status === "success" ? SWIFT_BYTE_COLOURS.STATE_GREEN :
                                    props.status === "warning" ? SWIFT_BYTE_COLOURS.STATE_ORANGE :
                                        props.status === "error" ? SWIFT_BYTE_COLOURS.STATE_RED :
                                            SWIFT_BYTE_COLOURS.GRAY,
                        },
                        props.style
                    ]
                }
            >
            </RNTextInput>
        </View>
    )
}

const styles = StyleSheet.create({})