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

interface TextFieldProps {
    label?: string
    value: string
    onChangeText: (text: string) => void
    placeholder?: string
    style?: ReactNative.StyleProp<ReactNative.TextStyle>
}

export function TextArea(props: TextFieldProps) {
    const baseFontSize = PixelRatio.getFontScale() * 16;

    return (
        <View>
            {props.label &&
                <Text
                    style={{
                        fontWeight: "bold",
                        fontSize: baseFontSize,
                        marginBottom: 5
                    }}
                >{props.label}</Text>}
            <RNTextInput
                {...props}
                multiline
                style={
                    [
                        {
                            borderWidth: 1,
                            paddingLeft: baseFontSize * 2,
                            paddingRight: baseFontSize * 2,
                            paddingTop: baseFontSize,
                            paddingBottom: baseFontSize,
                            borderColor: SWIFT_BYTE_COLOURS.GRAY,
                            minHeight: 100,
                            margin: 5
                        },
                        props.style
                    ]
                }
            >
            </RNTextInput>
        </View>
    )
}

const styles = StyleSheet.create({})