import React, { useState, } from 'react'
import { Text, TextStyle, ViewStyle, StyleSheet, View, } from 'react-native'
import c from '../../color/colors'
import t from '../../translator/translator'

import MyTextInput from './MyTextInput'


type Props = {
    textViewStyle: ViewStyle,
    textInputStyle: TextStyle,

    value: String,
    onChangeText: (text: String) => void,
    maxLength: Number,
    placeholder: String,
}


export default TextInputWithLimitView = (props: Props) =>
{
    const [currText, setCurrText] = useState(props.value || '')

    return (
        <View
            style = { [styles.container, props.textViewStyle] }
        >
            <MyTextInput
                style = { [styles.textInput, props.textInputStyle] }
                value = { props.value }
                maxLength = { props.maxLength }
                onChangeText = { text => { setCurrText(text); props.onChangeText && props.onChangeText(text); } }
                placeholder = { props.placeholder }
                placeholderTextColor = { c().text_908F94 }
            />
            <Text style={ styles.counterText }>{ `${currText.length} / ${props.maxLength || '∞'}` }</Text>
        </View>
    )
}
TextInputWithLimitView.defaultProps = {

}



const styles = StyleSheet.create({
    container: {
        height: 48,
        flexDirection: 'row',
        backgroundColor: c().text_input_bg_1A191F,
        borderRadius: 12,
        overflow: 'hidden',
    },
    textInput: {
        flex: 1,
        paddingHorizontal: 16,
        lineHeight: 21,
        color: c().text_input_FFFFFF,
    },
    counterText: {
        fontSize: 10,
        alignSelf: 'center',
        marginRight: 16,
        color: c().text_4A484E,
    },
})
