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} 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 : this.props.navigation.getParam('id','pi1'),
            today : date.getFullYear() + "." + month + "." + date.getDate(),
            current_weight : get_now_weight() ,
            table_contents : [['오후','6:12:15', '+0.25kg', 'Total : 1.5 kg'],['오후','4:27:52', '+0.12kg', 'Total : 1.38kg'],
            ['오후','6:12:15', '+0.25kg', 'Total : 1.5 kg'],['오후','6:12:15', '+0.25kg', 'Total : 1.5 kg'],
            ['오후','6:12:15', '+0.25kg', 'Total : 1.5 kg'],['오후','6:12:15', '+0.25kg', 'Total : 1.5 kg'],
            ['오후','6:12:15', '+0.25kg', 'Total : 1.5 kg'],['오후','6:12:15', '+0.25kg', 'Total : 1.5 kg'],
            ['오후','6:12:15', '+0.25kg', 'Total : 1.5 kg'],['오후','6:12:15', '+0.25kg', 'Total : 1.5 kg']
            ]
        }
    }

    get_diff_data(){
        return fetch('http://10.0.2.2:3000/app/get_diff_data/',{
            method:'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
              },
            body:JSON.stringify({
                ras_id : this.state.ID,
                date : this.state.today,
            }),
        })
        .then((response) => console.log(response.json())) 
        .then((responseJson)=> {
            console.log(responseJson)
        },function(){
        })
        .catch((error) =>  {
            console.error(error);
        })
    }

    render() {
        return (
            <View style={style.container}>
                <View style={style.header}>
        <Text style={style.tabName}>Home {this.state.ID}</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}
                        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={[2.5, 1.5, 1.5]} textStyle={style.row_style1}/>
                                    <Rows data={this.state.table_contents} flexArr={[1, 1.5, 1.5, 1.5]} 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,
    },
});