import React, { Component } from 'react';
import { View, Text, StyleSheet, SafeAreaView, ScrollView, Image } from 'react-native';
import Circle from '../component/circle_component'
import {Table, TableWrapper, Row,Rows} from 'react-native-table-component'
import  {get_now_weight, get_today_data, add_data ,get_id} from'../component/DBhelper.js';

var date = new Date();
date.setHours(date.getHours()+9);
var month = date.getMonth()+1;
if(month == 11){
    month = 12
}

export default class HomeTab extends Component {
    constructor(props){
        super(props);
        this.state = {
            ID : get_id(),
            today : date.getFullYear() + "." + month + "." + date.getDate(),
            current_weight : get_now_weight() ,
            table_contents : get_today_data()
        }
    }
    componentDidMount() {
        const { navigation } = this.props;
        this.focusListener = navigation.addListener('didFocus', () => {
            this.setState({current_weight : get_now_weight(), table_contents : get_today_data()});
        });
      }

    componentWillUnmount() {
        this.focusListener.remove();
    }

    get_diff_data(){
        return fetch('http://testloadbalancer-1847561458.ap-northeast-2.elb.amazonaws.com/app/get_diff_data/',{
            method:'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
              },
            body:JSON.stringify({
                ras_id : this.state.ID,
                date : "1576648647000",
            }),
        })
        .then((response) => response.json())
        .then((responseJson)=> {
            console.log(responseJson)
            add_data(responseJson);
        },function(){
        })
        .then(()=>{this.setState({current_weight : get_now_weight(), table_contents : get_today_data()})})
        .catch((error) =>  {
            console.error(error);
        })
    }

    render() {
        return (
            <View style={style.container}>
                <View style={style.header}>
                    <Text style={style.tabName}>Home</Text>
                </View>
                <View style={{flexDirection:'row',flex:0.8,backgroundColor: "rgba(230,230,230,0.5)"}}>
                        <View style={{flex:1,justifyContent:'center'}}>
                            <Image style={style.img}
                            source={require("../assets/calendar.jpg")}/>
                        </View>
                        <View style={{flex : 8, justifyContent:'center'}}>
                            <Text style ={style.date_text}>{this.state.today}</Text>
                        </View>    
                    </View>
                <View style={this.state.current_weight}>
                    <Circle
                        title={this.state.current_weight/1000}
                        onPress={()=>{this.get_diff_data()}}>
                    </Circle>
                </View>
                <View style={style.waste_detail}>
                    <SafeAreaView style={style.scroll_container}>
                        <ScrollView style={style.scroll_page}>
                            <Text style={style.history}>Today's History</Text>
                            <Table>
                                <TableWrapper>
                                    <Row data={['시간', '증감량', '총량']} flexArr={[1, 1, 1]} textStyle={style.row_style1}/>
                                    <Rows data={this.state.table_contents} flexArr={[1, 1, 1]} textStyle={style.row_style2}/>
                                </TableWrapper>
                                      
                            </Table>
                        </ScrollView>
                    </SafeAreaView>
                </View>
                    
            </View>
        );
    }
}
const style = StyleSheet.create({
    container: {
        flex: 1,
    },
    header: {
        flex :1,
        justifyContent : 'center',
    },
    tabName:{
        marginStart : 10,
        textAlignVertical : 'center',
        fontSize : 20,
        color : "#0066cc",
        fontWeight: 'bold',
    },
    current_state:{
        flex: 5,
        backgroundColor: "rgba(230,230,230,0.5)"
    },
    waste_detail:{
        flex :5,
        backgroundColor: "rgba(230,230,230,0.5)",
    },
    date_text:{
        fontSize :20,
        marginStart:5,
        textAlignVertical:'center'
    },
    scroll_container : {
        flex:1,
    },
    scroll_page:{
        margin:20,
        borderWidth : 1,
    },
    history : {
        fontSize : 22,
        marginBottom : 5,
        marginStart : 5
    },
    content:{
        fontSize : 15,
    },
    wrapper: { 
        flexDirection: 'row' 
    },
    row_style1:{
        textAlign : 'center',
        fontSize : 18,
        marginBottom : 5,
        borderBottomWidth:1,
    },
    row_style2:{
        borderBottomWidth:1,
        marginVertical : 2,
        fontSize : 15,
        textAlign : 'center',
    },
    img:{
        width :20,
        resizeMode : 'contain',
        alignSelf:'baseline',
        marginStart:10,
    },
});