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} from'../component/DBhelper.js';

const data1 = [
    { label: 'MON', value: 1.8 },
    { label: 'TUE', value: 4.2 },
    { label: 'WEN', value: 1.6 },
    { label: 'THU', value: 0 },
    { label: 'FRI', value: 2.0 },
    { label: 'SAT', value: 3.3 },
    { label: 'SUN', value: 1.3 }
]
const data2 = [
    { label: '1', value: 4.6 },
    { label: '8', value: 3.7 },
    { label: '15', value: 3.0 },
    { label: '22', value: 5.2 },
    { label: '29', value: 3.1 }
]
const data3 = [
    { label: 'Jan', value: 500 },
    { label: 'Feb', value: 312 },
    { label: 'Mar', value: 424 },
    { label: 'Apr', value: 745 },
    { label: 'May', value: 89 },
    { label: 'Jun', value: 434 },
    { label: 'Jul', value: 650 },
    { label: 'Aug', value: 980 },
    { label: 'Sep', value: 123 },
    { label: 'Oct', value: 186 },
    { label: 'Nov', value: 689 },
    { label: 'Dec', value: 643 }
]

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 }
]

const kg1 = "총 3.5kg"
const kg2 = "총 9,6kg"
const kg3 = "총 21.3kg"

export default class HomeTab extends Component {
    constructor(){
        super();
        this.state = {
            selectedIndex: 0,
            data: data1,
            title: "총 3.5kg",
            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'
    }
})