import React, { Component } from 'react';
import {View, Text, StyleSheet, TextInput, ScrollView, KeyboardAvoidingView, TouchableHighlight} from 'react-native';
import {Icon} from 'react-native-elements';
import { Dropdown } from 'react-native-material-dropdown';

export default class TambahAlamatScreen extends Component {

    constructor(props){
        super(props);
        this.state = {
            APIUrl: '?????',
            provinceList: [],
            //subProvinsiList: []
        }

        this.getProvinsiListData = this.getProvinsiListData.bind(this);
    }

    //GET DATA PROVINSI
    getProvinsiListData(){

        var temp = [];
        fetch( this.state.APIUrl + '/tracking/get/province' , {
            method: 'GET',
            headers: {
                Accept: "application/json",
                "Content-Type": "application/json"
            }
        })
        .then(response => response.json())
        .then(responseJSON => {
            var len = responseJSON.length;
            //responseJSON.data.map(data => ({ value: data })
            //console.log(len);
            if ( len > 0 ){
                for ( let i = 0; i < len; i++ ){
                    var data = responseJSON[i];
                    //console.log('masuk' + data.province);
                    var joined = { value: data };
                    console.log(data);
                    temp.push(joined);
                }
            }
            //console.log('ini list provinsi=', JSON.stringify(temp));
            this.setState({
                provinceList: temp
            });
            console.log('testing' + this.state.provinceList);
        })
        .catch(error => {
            console.log(error);
        });

    }


    //Header customize from react native navigator
    static navigationOptions = ({ navigation }) => {
        let headerTitle = 'Tambah Alamat';
        let headerTitleStyle={ color:'#fff', textAlign: 'center', fontSize:18 , flex:1, marginLeft:-50};
        let headerTintColor= '#fff';
        let headerStyle={ backgroundColor: '#3250E0' };
        let headerBackTitle= '';

        return{ headerTitle, headerTitleStyle, headerStyle, headerTintColor, headerBackTitle }
    }


    //Get API Provinsi
    componentDidMount()
    {
        this.getProvinsiListData();
    }




    render(){

        return(
            <View style={styles.container}>
            <KeyboardAvoidingView behavior="padding" enabled>
                <ScrollView>
                <View style={{marginVertical:10, marginHorizontal:10}}>

                        <View style={styles.jarak}>
                            <Text style={{fontSize:14}}>Nama Lengkap</Text>
                            <TextInput
                                style={{height: 40, borderBottomColor: '#616161', borderBottomWidth: 2}}
                                placeholder='Masukkan nama lengkap'
                            />
                        </View>

                        <View style={styles.jarak}>
                            <Text style={{fontSize:14}}>Alamat</Text>
                            <TextInput
                                style={{height: 40, borderBottomColor: '#616161', borderBottomWidth: 2}}
                                placeholder='Masukkan alamat lengkap'
                            />
                        </View>

                        <View style={styles.jarak}>
                            <Text style={{fontSize:14}}>Provinsi</Text>
                            <Dropdown
                                baseColor='#616161'
                                textColor='#616161'
                                label='Pilih Provinsi'
                                onChangeText={this.onChangeText}
                                data={this.state.provinceList}
                            />
                        </View>

                        <View style={styles.jarak}>
                            <Text style={{fontSize:14}}>Kota</Text>
                            <TextInput
                                style={{height: 40, borderBottomColor: '#616161', borderBottomWidth: 2}}
                                placeholder='Pilih Kota'
                            />
                        </View>

                        <View style={styles.jarak}>
                            <Text style={{fontSize:14}}>Kecamatan</Text>
                            <TextInput
                                style={{height: 40, borderBottomColor: '#616161', borderBottomWidth: 2}}
                                placeholder='Pilih Kecamatan'
                            />
                        </View>

                        <View style={styles.jarak}>
                            <Text style={{fontSize:14}}>Kode Pos</Text>
                            <TextInput
                                style={{height: 40, borderBottomColor: '#616161', borderBottomWidth: 2}}
                                placeholder='Masukkan Kode Pos'
                            />
                        </View>

                        <View style={styles.jarak}>
                            <Text style={{fontSize:14}}>No. Telp</Text>
                            <TextInput
                                style={{height: 40, borderBottomColor: '#616161', borderBottomWidth: 2}}
                                placeholder='Masukkan No Telepon'
                            />
                        </View>

                        <View style={styles.jarak}>
                            <Text style={{fontSize:14}}>Status</Text>
                            <TextInput
                                style={{height: 40, borderBottomColor: '#616161', borderBottomWidth: 2}}
                                placeholder='Status'
                            />
                        </View>

                        <TouchableHighlight style={styles.btn}>
                            <Text style={styles.btnText}>Simpan</Text>
                        </TouchableHighlight>

                    </View>
                </ScrollView>
            </KeyboardAvoidingView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'flex-start',
        backgroundColor: '#fff',
        paddingHorizontal: 10,
    },
    jarak: {
        marginVertical:10
    },
    btn: {
        backgroundColor: '#3250E0',
        padding: 10,
    },
    btnText: {
        textAlign: 'center',
        color: '#fff',
    },
});

var joined = { value: data.province };