import React, { Component } from 'react';
import axios from 'axios';
import { View, TextInput, Text, Button, StyleSheet, ScrollView } from 'react-native';
import { Table, Row, Rows } from 'react-native-table-component';

export default class Contact extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableHead: ['ID', 'Name', 'Email', 'No', 'Address'],
      tableData: [
        // ['1', 'Joko', 'joko@gmail.com', '0812484548', 'Tangerang'],
        // ['2', 'Joko', 'joko@gmail.com', '0812484548', 'Tangerang'],
        // ['3', 'Joko', 'joko@gmail.com', '0812484548', 'Tangerang'],
        // ['4', 'Joko', 'joko@gmail.com', '0812484548', 'Tangerang'],
      ]
    }
  }

  // Add
  handleSubmit() {
    axios({
      method: 'post',
      url: 'http://192.168.1.24/training1/public/api/contacts',
      data: {
        TextInputName: '',
        TextInputEmail: '',
        TextInputNo: '',
        TextInputAddress: '',
      }
    })
      .then(function (response) {
        console.log(response.data)
      })
      .catch(function (error) {
        console.log(error);
      });
    //  alert('success')
  }

  // Index
  componentDidMount() {
    axios({
      method: 'get',
      url: 'http://192.168.1.24/training1/public/api/contacts',
      dataType: 'json',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    })
      .then(function (response) {
        console.log(response.data)
        const contacts = response.data.result.contacts;
        this.setState({ contacts });
        // console.log(contacts)
      })
      .catch(function (error) {
        console.log(error);
      });

  }


  // constructor(props) {
  //   super(props)
  //   this.state = {
  //     TextInputName: '',
  //     TextInputEmail: '',
  //     TextInputNo: '',
  //     TextInputAddress: '',
  //   }
  // }

  // InsertContacts = () => {
  //   const {TextInputName} = this.state;
  //   const {TextInputEmail} = this.state;
  //   const {TextInputNo} = this.state;
  //   const {TextInputAddress} = this.state;
  // }

  render() {
    const state = this.state;
    return (
      <View style={{ flex: 1, backgroundColor: '#DCDCDC' }}>
         <View style={{ backgroundColor: '#00a1dd', height: 45, alignItems: 'center', justifyContent: 'center' }}>
            <Text style={{ color: '#fff', fontWeight: 'bold' }}>Contact</Text>
          </View>
        <View style={{ alignItems: 'center' }} >
          <Text style={styles.title}>Send Message</Text>
        </View>
        <View style={{ marginHorizontal: 17, paddingTop: 15, }}>
          <TextInput placeholder="Your Name" onChangeText={TextInputValue => this.setState({ TextInputName: TextInputValue })} style={{ borderWidth: 1, borderColor: '#E8E8E8', borderRadius: 25, height: 40, fontSize: 13, paddingLeft: 45, paddingRight: 20, backgroundColor: 'white' }} />
        </View>
        <View style={{ marginHorizontal: 17, paddingTop: 15, }}>
          <TextInput placeholder="Your Email" onChangeText={TextInputValue => this.setState({ TextInputEmail: TextInputValue })} style={{ borderWidth: 1, borderColor: '#E8E8E8', borderRadius: 25, height: 40, fontSize: 13, paddingLeft: 45, paddingRight: 20, backgroundColor: 'white' }} />
        </View>
        <View style={{ marginHorizontal: 17, paddingTop: 15, }}>
          <TextInput placeholder="Your No" onChangeText={TextInputValue => this.setState({ TextInputNo: TextInputValue })} style={{ borderWidth: 1, borderColor: '#E8E8E8', borderRadius: 25, height: 40, fontSize: 13, paddingLeft: 45, paddingRight: 20, backgroundColor: 'white' }} />
        </View>
        <View style={{ marginHorizontal: 17, paddingTop: 15, }}>
          <TextInput placeholder="Your Address" onChangeText={TextInputValue => this.setState({ TextInputAddress: TextInputValue })} style={{ borderWidth: 1, borderColor: '#E8E8E8', borderRadius: 25, height: 40, fontSize: 13, paddingLeft: 45, paddingRight: 20, backgroundColor: 'white' }} />
        </View>
        <View style={{ alignItems: 'center' }} >
          <View style={{ marginHorizontal: 17, paddingTop: 15, }}>
            <Button title="Send Message" onPress={this.handleSubmit} />
          </View>
        </View>
        <View style={{ marginHorizontal: 17, paddingTop: 15, }}>
          </View>
        <View style={{ marginHorizontal: 17, paddingTop: 15, }}>
          <View style={{ alignItems: 'center' }} >
            <Text style={styles.title}>Data Contact</Text>
          </View>
          <ScrollView style={styles.dataWrapper}>
          <Table borderStyle={{ borderWidth: 1, borderColor: '#778899' }}>
            <Row data={state.tableHead} style={styles.head} textStyle={styles.text} />
            <Rows data={state.tableData} style={styles.data} textStyle={styles.text} />
          </Table>
          </ScrollView>
        </View>
      </View>

    );
  }
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 10, paddingTop: 20, backgroundColor: '#fff' },
  head: { height: 25, backgroundColor: '#fff' },
  data: { backgroundColor: '#fff' },
  text: { margin: 6, },
  texthead: { textAlign: 'center' }

});