import React, {Component} from 'react';
import {Color} from "../../config/Color";
import I18n from "react-native-i18n";
import * as Animatable from "react-native-animatable";
import {Fumi} from "react-native-textinput-effects";
import FontAwesomeIcon from "react-native-vector-icons/FontAwesome";
import {ScrollView, StyleSheet, Text, View} from "react-native";
import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
import {FontWeight, Typography} from "../../config/typography";
import Button from "apsl-react-native-button";


export default class AcceptPrestationAgent extends Component {

    static navigatorStyle = {
        navBarBackgroundColor: Color.primaryColor,
        statusBarColor: Color.primaryDarkColor,
        navBarTextColor: '#FFFFFF',
        navBarButtonColor: '#FFFFFF'

    };

    static navigationOptions = () => {
        return {
            drawerLabel: () => null,
            headerTitle: I18n.t('ACCEPTER_PRESTATION'),
            headerTintColor: 'white',
            headerStyle: {
                backgroundColor: Color.primaryColor,
                marginTop: 0,
                color: 'white'
            },
            headerTitleStyle: {
                color: "white"
            },
            title: I18n.t('ACCEPTER_PRESTATION')
        }
    };

    constructor(props) {
        super(props);
        this.state = {
            password: null,
            numeroTelephone: null
        }
    }

    render() {
        return (
            <ScrollView style={styles.container}>

                <Text style={styles.subbigtitle}>{I18n.t('ACCEPTER_PRESTATION')}</Text>
                <Animatable.View ref={(comp) => {
                    this.numeroTelephoneAnim = comp
                }}>
                    <Fumi iconClass={FontAwesomeIcon} iconName="phone"
                          label={I18n.t('PHONE')}
                          iconColor={'#f95a25'}
                          keyboardType='phone-pad'
                          iconSize={20}
                          value={this.state.numeroTelephone}
                          onChangeText={(numeroTelephone) => {
                              this.setState({numeroTelephone})
                          }}
                          style={styles.input}
                    >
                    </Fumi>
                </Animatable.View>

                <Animatable.View ref={(comp) => {
                    this.passwordAnim = comp
                }}>
                    <Fumi iconClass={FontAwesomeIcon} iconName={'lock'}
                          label={I18n.t('PASSWORD')}
                          iconColor={'#f95a25'}
                          iconSize={20}
                          secureTextEntry={true}
                          value={this.state.password}
                          onChangeText={(password) => {
                              this.setState({password})
                          }}
                          style={styles.input}
                    >
                    </Fumi>
                </Animatable.View>

                <Button style={styles.btnvalide}
                        textStyle={styles.textbtnvalide}
                        onPress={() => {
                            //this.onSubmitSendWalletToCard()
                        }}>
                    {I18n.t('SUBMIT_LABEL')}</Button>
            </ScrollView>
        )
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Color.primaryDarkColor,
    },
    textbtnvalide: {
        color: 'white',
        fontWeight: 'bold'
    },
    bigtitle: {
        color: 'white',
        fontSize: 20,
        flex: 1,
        fontWeight: 'bold',
        textAlign: 'center',
        margin: 20,
    },
    blockView: {
        paddingVertical: 10,
        borderBottomWidth: 1
    },
    subbigtitle: {
        color: 'white',
        fontSize: 17,
        textAlign: 'center',
        margin: 5,
    },
    btnvalide: {
        marginTop: 20,
        marginLeft: 20,
        marginRight: 20,
        borderColor: 'transparent',
        backgroundColor: Color.accentLightColor,
        height: 52
    },
    btnSubmit: {
        marginTop: 20,
        borderColor: 'transparent',
        backgroundColor: Color.accentLightColor,
        height: 52,
        width: "30%",
        marginLeft: 20,
        marginRight: 20,
    },
    input: {
        height: 60,
        marginTop: responsiveHeight(2),
        marginLeft: responsiveWidth(5),
        marginRight: responsiveWidth(5),
        borderRadius: 5,
    }
});