import React, { Component } from 'react';
import { Text, View, StyleSheet, TouchableOpacity, Image, TextInput, SafeAreaView, } from 'react-native';
import { Item, Input, Icon, Left, Button, DatePicker, Picker } from 'native-base';
import axios from 'axios';

class Transaksi extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id: '',
            date: '',
            name: '',
            amount: '',
            transactionSource:[]

        }
    }

    componentDidMount() {
        console.log(this.state);
        axios({
            method: 'get',
            url: 'http://192.168.1.25/selling/public/api/transactions',
            dataType: 'json',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
        })
            .then(response => {
                var transaction = [];
                for (var i = 0; i < response.data.results.transactions.length; i++) {
                    transaction.push([
                        response.data.results.transactions[i].id,
                        response.data.results.transactions[i].date,
                        response.data.results.transactions[i].name,
                        response.data.results.transactions[i].amount,
                        response.data
                    ]);
                }

                this.setState({
                    transactionSource : transaction,
                });
            });
        console.log(this.state.data);

        axios({
            method: 'get',
            url: 'http://192.168.1.25/selling/public/api/members',
            dataType: 'json',
            headers: {
                'Accept' : 'application/json',
                'Content-Type' : 'application/json'
            },
        })
        .then(response => {
            var member = [];
            for (var i = 0; i < response.data.results.members.length; i++) {
                member.push([
                    response.data.results.members[i].id,
                    response.data.results.members[i].name,
                    response.data.results.members[i].email,
                    response.data.results.members[i].telp,
                    response.data
                ]);
            }

        });
        console.log(this.state.data);
    }

    handleSubmit = () => {
        console.log(this.state)
        axios({
            method: 'post',
            url: 'http://192.168.1.25/selling/public/api/transactions',
            dataType: 'json',
            headers: {
                'Accept': 'application/json',
                'Content-type': 'application/json'
            },
            data: {
                date: this.state.date,
                name: this.state.members,
                amount: this.state.amount
            },
        })
            .then(function (response) {
                console.log(response.data);
            })
            .catch(function (error) {
                console.log(error);
            });
        this.setState({ date: '', name: '', amount: '' });
    }

    // onValueChange() {
    //     this.setState({
    //         transactions: value
    //     });
    // }
    formatValue(amount) {
        (parseFloat(amount) / 100, "$ ");
    }

    render() {
        const state = this.state;
        return (
            <View style={{ flex: 2, backgroundColor: '#fff' }}>
                <View style={{ marginHorizontal: 17, paddingTop: 15 }}>
                    <Text style={[
                        styles.text, { textAlign: 'left' }, { color: '#000' },
                    ]}>
                        Tanggal
                    </Text>
                    <DatePicker
                        locale={"en"}
                        timeZoneOffsetInMinutes={undefined}
                        modalTransparent={false}
                        iosIcon={<Icon name="arrow-down" />}
                        animationType={"slide"}
                        androidMode={"calendar"}
                        placeHolderText="Pilih Tanggal"
                        underlineColorAndroid="#1171EC"
                        onDateChange={date => this.setState({ date: date })} value={this.state.date}
                        disabled={false}
                    />
                    {/* <TextInput placeholder="Pilih Tanggal" onDateChange={date => this.setState({ date })} value={this.state.date} underlineColorAndroid="#1171EC" /> */}
                </View>
                <View style={{ marginHorizontal: 17, paddingTop: 15 }}>
                    <Text style={[
                        styles.text, { textAlign: 'left' }, { color: '#000' },
                    ]}>
                        Nama
                   </Text>
                   <Picker
                        selectedValue={this.state.transactions}
                        onValueChange={(itemValue, itemIndex) =>
                          this.setState({ transactions: itemValue })} >

                            {this.state.transactionSource && this.state.transactionSource.map((item, key)=>(
                                <Picker.Item label={item.name} value={item.id} key={key} />)
                            )}
                      </Picker>
                </View>

                <View style={{ marginHorizontal: 17, paddingTop: 15 }}>
                    <Text style={[
                        styles.text, { textAlign: 'left' }, { color: '#000' },
                    ]}>
                        Jumlah
                    </Text>
                    <TextInput placeholder="Rp. " onDateChange={amount => this.setState({ amount })} value={this.formatValue(this.state.amount)} underlineColorAndroid="#1171EC" />
                </View>
            </View>

        )
    }
}
export default Transaksi;
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
});