import React, { Component } from 'react';
import { View, Text, TextInput, TouchableOpacity, Platform } from 'react-native';
import { colors } from '../assets/styles/colors-theme';
import { width, height } from '../services/screen';

class SizeInput extends Component {
    render() {
        return (
            <View
                style={{
                    backgroundColor: 'white',
                    height: 20,
                    borderRadius: 15,
                    width: 220,
                    alignItems: 'center',
                    marginTop: 20,
                    flexDirection: 'row'

                }}>
                <Text style={{ color: colors.buttonColor, marginRight: 5 }}>
                    {this.props.title}
                </Text>
                <View style={{ width: 200, height: 20, justifyContent: 'center', alignItems: 'center', flexDirection: 'row', borderWidth: 1, borderColor: colors.buttonColor, borderRadius: 5 }}>
                    <TextInput
                        underlineColorAndroid="rgba(0,0,0,0)"
                        keyboardType={'number-pad'}
                        maxLength={20}
                        onChangeText={this.props.onChangeText}
                        placeholderTextColor={colors.inputTextColor}
                        ref={input => this.props.inputRef && this.props.inputRef(input)}
                        returnKeyType={this.props.returnKeyType}
                        onSubmitEditing={
                            this.props.onSubmitEditing && this.props.onSubmitEditing
                        }
                        onFocus={this.props.onFocus}
                        //placeholder={this.props.title}
                        value={this.props.value}
                        style={{
                            color: colors.buttonColor,
                            width: 100,
                            height: 20,
                            marginLeft: 50,

                            marginBottom: Platform.OS === 'ios' ? 3 : 0,
                            paddingVertical: 0,

                        }}
                    />
                </View>
                {this.props.unit != null ? (<Text style={{ color: colors.buttonColor, position: 'absolute', right: 5 }}>
                    {this.props.unit}
                </Text>) : (<View />)}

            </View>
        );
    }
}
export default SizeInput;
