import React, { Component } from 'react';
import { View, Text, StyleSheet,ScrollView, RefreshControl } from 'react-native';
import { BarChart, Grid } from 'react-native-svg-charts'
import HistoryGraph from '../component/HistoryGraph'
import SegmentedControlTab from "react-native-segmented-control-tab";
import  {add_data, get_week_data, get_today_data, get_month_data, get_year_data} from'../component/DBhelper.js';
var list1 = get_week_data();
var list2 = get_month_data();
var list3 = get_year_data();
//var today = new Date();
//today.setHours(today.getHours()+9);
var week = ['SUN','MON','TUE', 'WED', 'THU', 'FRI', 'SAT'];

const data1 = [
    { label: week[list1[1][0]], value: list1[0][0] },
    { label: week[list1[1][1]], value: list1[0][1] },
    { label: week[list1[1][2]], value: list1[0][2] },
    { label: week[list1[1][3]], value: list1[0][3] },
    { label: week[list1[1][4]], value: list1[0][4] },
    { label: week[list1[1][5]], value: list1[0][5] },
    { label: week[list1[1][6]], value: list1[0][6] }
]
const data2 = [
    { label: '1', value: list2[0] },
    { label: '7', value: list2[1] },
    { label: '14', value: list2[2]},
    { label: '21', value: list2[3] },
    { label: '28', value: list2[4] }
]
const data3 = [
    { label: 'Jan', value: list3[0] },
    { label: 'Feb', value: list3[1] },
    { label: 'Mar', value: list3[2] },
    { label: 'Apr', value: list3[3] },
    { label: 'May', value: list3[4] },
    { label: 'Jun', value: list3[5] },
    { label: 'Jul', value: list3[6] },
    { label: 'Aug', value: list3[7] },
    { label: 'Sep', value: list3[8] },
    { label: 'Oct', value: list3[9] },
    { label: 'Nov', value: list3[10] },
    { label: 'Dec', value: list3[11] }
]

const data4 = [         
    { label: 'C', value: 500 },
    { label: 'H', value: 312 },
    { label: 'A', value: 424 },
    { label: 'N', value: 745 },
    { label: 'G', value: 89 },
    { label: 'E', value: 434 }
]

function total(list){
    var total=0;
    for(var i =0; i< list.length; i++)
        total += list[i]
    return total
}

const kg1 = "총 " + total(list1[0]) + "kg"
const kg2 = "총 " + total(list2) + "kg"
const kg3 = "총 " + total(list3) + "kg"

export default class HomeTab extends Component {
    constructor(){
        super();
        this.state = {
            selectedIndex: 0,
            data: data1,
            title: "총 " + total(list1[0]) + "kg",
            spane: "",
            refreshing: false
        }
    }

    _onRefresh = () => {
        this.setState({refresing: true});
        // this.setState({data: data4})
        this.get_diff_data();
        this.setState({refreshing: false});
    }

    handleIndexChange = index => {
        this.setState({selectedIndex: index});
        switch(index){
            case 0:
                this.setState({data: data1, title: kg1});
                break;
            case 1:
                this.setState({data: data2, title: kg2});
                break;
            case 2:
                this.setState({data: data3, title: kg3});
                break;
        }
      };

    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 : "pi1",
                date : "1576339901541",
            }),
        })
        .then((response) => response.json())
        .then((responseJson)=> {
            console.log(responseJson)
            add_data(responseJson)
        },function(){
        })
        .catch((error) =>  {
            console.error(error);
        })
    }
    
    render() {
        // const fill = 'rgb(134, 65, 244)'
        // const data = [50, 10, 40, 95, -4, -24, null, 85, undefined, 0, 35, 53, -53, 24, 50, -20, -80]

        // return (
        //     <BarChart style={{ height: 200 }} data={data} svg={{ fill }} contentInset={{ top: 30, bottom: 30 }}>
        //         <Grid />
        //     </BarChart>
        // );

        return(
            <ScrollView style = {style.container}
                refreshControl={
                    <RefreshControl
                    refreshing={this.state.refreshing}
                    onRefresh={this._onRefresh}
                    tintColor="#000000"
                    title="Loading..."
                    titleColor="#0066cc"
                    colors={["#ffffff",'#0066cc','#ffffff']}
                    progressBackgroundColor="#0066cc"
                    />
                }
            >
            <View style = {style.container}>
                <View style={style.header}>
                    <Text style={style.tabName}>History </Text>
                </View>
                <View style={{flex : 8, justifyContent:'center'}}>
                            <Text style ={style.date_text}>{this.state.title}</Text>
                </View>   
                <SegmentedControlTab
                    values={["Week", "Month", "Year"]}
                    selectedIndex={this.state.selectedIndex}
                    onTabPress={this.handleIndexChange}
                />
                <HistoryGraph data={this.state.data} round={100} unit="kg"/>
            </View>
            </ScrollView>
        )
    }
}

const style = StyleSheet.create({
    container: {
        flex: 1,
    },
    header: {
        flex :2,
        justifyContent : 'center',
        padding : 10,
    },
    tabName:{
        marginStart : 10,
        textAlignVertical : 'center',
        fontSize : 20,
        color : "#0066cc",
        fontWeight: 'bold',
    },
    date_text:{
        fontSize :20,
        marginStart:5,
        textAlignVertical:'center'
    }
})